Не работает justify-content space-between

Question

Не работает это свойство. Вот пример:

.tasks__list-item-todo-buttons {
  display: flex;
  justify-content: space-between; 
}
 
 .tasks__list-item-todo-buttons-row {
  display: flex;
  gap: 5px;
}

.users__list-item-action-btn-edit {
  background-color: #0059ff;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
}

.users__list-item-action-btn-delete {
  background-color: darkred;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
}

.tasks__list-item-todo-buttons-form-button {
  padding: 10px;
  background-color: gray;
  border-radius: 5px;
  color: #fff;
}

<div class="tasks__list-item-todo-buttons">
                        <div class="tasks__list-item-todo-buttons-row">
                            <form action="post" class="tasks__list-item-todo-buttons-form">
                                <input type="text" class="tasks__list-item-todo-buttons-form-input" name="status" value="Новая" hidden>
                                <button class="tasks__list-item-todo-buttons-form-button">Новая</button>
                            </form>
                        </div>
                        <div class="tasks__list-item-todo-buttons-row">
                            <form method="post" action="/todo/tasks/delete" class="users__list-item-actions-edit">
                                <input type="text" name="id" value="" hidden>
                                <button class="users__list-item-action-btn-delete" onclick="return confirm('Вы уверены?')">Удалить</button>
                            </form>
                        </div>
                    </div>

Смотрите, что самое интересное, тут работает, а вот что у меня получается:

Answer 1

По Вашему скрину не очень всё понятно, но могу предположить, что тут Ваш код работает, потому что Вы сюда скопировали лишь его фрагмент. А на скрине видно, что приведённый Вами фрагмент, помимо того, что он flex-контейнер, и сам является flex-элементом своего родителя.

И вот здесь, как раз и не ясно: возможно, свойство space-between таки работает, но tasks__list-item-todo-buttons просто слишком узкий и занимает по ширине как раз только эти две кнопки (грубо говоря, он стал не блочным, а строчным, когда поместился в flex-контейнер)? Советую обратить внимание на родительский div с классом .tasks__list-item-todo-actions

БЛОГ НА HUSL

Не работает justify-content space-between

Ответы (1 шт):