Почему margin-left auto не работает на кнопках без flexbox

Причина, по которой margin-left: auto работает по-разному с display: flex по сравнению со свойством display по умолчанию, заключается в том, как CSS обрабатывает поля для разных типов элементов и в разных контекстах компоновки. Элементы button имеют display: inline по умолчанию, и автоматические поля (auto margins) не работают для строчных элементов - они автоматически преобразуются в 0. Когда родительский элемент имеет display: flex, кнопка фактически становится flex-элементом, который следует другим правилам полей.

Содержание

• Понимание поведения кнопок по умолчанию
• Почему автоматические поля работают в Flexbox
• Решения для выравнивания без Flexbox
• Лучшие практики и рекомендации

Понимание поведения кнопок по умолчанию

Когда вы явно не устанавливаете свойство display для родительского div, оно по умолчанию имеет значение display: block. Однако сам элемент button по умолчанию имеет display: inline, что создает фундаментальную проблему с автоматическими полями.

Ключевая проблема заключается в том, что автоматические поля не работают для строчных элементов. Согласно спецификациям CSS, когда элемент имеет display: inline, любое вычисленное значение auto для margin-left или margin-right становится используемым значением 0 источник.

Вот что происходит в вашем сценарии по умолчанию:

<div class="actions-buttons"> <!-- display: block по умолчанию -->
  <button class="button-secondary" type="button">Salvar respostas</button>
  <button class="button-primary" type="submit">Fazer matrícula</button>
</div>

• Родительский div имеет display: block
• Обе кнопки по умолчанию имеют display: inline
• margin-left: auto для строчного элемента становится margin-left: 0
• Эффект центрирования или выравнивания по правому краю не происходит

Почему автоматические поля работают в Flexbox

Когда вы устанавливаете display: flex для родительского контейнера, все меняется:

1. Flex-элементы ведут себя иначе: Когда родитель является flex-контейнером, его дочерние элементы становятся flex-элементами, которые имеют другие свойства компоновки, чем обычные строчные или блочные элементы.

2. Правила полей в Flexbox: В flexbox автоматические поля рассчитываются на основе доступного пространства в flex-контейнере, а не только ширины элемента. Браузер распределяет любое доступное пространство в соответствии с автоматическими полями.

3. Расчет автоматического поля: С margin-left: auto для flex-элемента браузер рассчитывает, сколько пространства доступно слева от элемента и применяет это в качестве поля, эффективно сдвигая элемент вправо.

Как объясняется на CSS-Tricks, “При margin-left:auto, auto рассчитывает все доступное пространство и делает его количеством пространства слева от элемента. Это сдвигает элемент полностью вправо.”

Вот почему ваш код работает, когда у родителя есть display: flex - кнопка становится flex-элементом, и правило автоматического поля применяется по-другому.

Решения для выравнивания без Flexbox

Существует несколько способов добиться аналогичного эффекта выравнивания по правому краю без использования flexbox:

1. Изменить свойство отображения кнопки

Наиболее прямое решение - сделать кнопку блочным элементом:

.button-secondary {
    display: block; /* или inline-block */
    margin-left: auto;
    max-width: 200px; /* или конкретная ширина */
}

Однако это может не дать вам желаемого расположения, поскольку блочные элементы по умолчанию занимают всю ширину.

2. Использовать Float для выравнивания по правому краю

.button-secondary {
    float: right;
}

3. Использовать выравнивание текста

Для строчных элементов можно использовать выравнивание текста у родительского элемента:

.actions-buttons {
    text-align: right;
}

.button-secondary {
    margin-left: 10px; /* при необходимости отрегулировать */
}

4. Использовать абсолютное позиционирование

.actions-buttons {
    position: relative;
}

.button-secondary {
    position: absolute;
    right: 0;
}

5. Использовать Grid Layout

.actions-buttons {
    display: grid;
    grid-template-columns: 1fr auto;
}

.button-secondary {
    grid-column: 2;
}

Важное замечание: Чтобы margin auto работал для не-flexbox элементов, элемент должен иметь определенную ширину. Как объясняется в одном из ответов на Stack Overflow, “блочным элементам нужна ширина, чтобы автоматические поля работали” источник.

Лучшие практики и рекомендации

Когда использовать Flexbox против других методов

• Flexbox: Лучше всего для выравнивания на уровне компонентов, особенно когда у вас есть несколько элементов с разными размерами
• Grid: Лучше всего для двумерных компоновок
• Floats/Position: Лучше всего для простых случаев или когда нужно поддерживать очень старые браузеры

Современное решение с Flexbox

Ваш текущий подход с flexbox на самом деле отличный и широко рекомендуется. Если вы хотите сохранить решение с flexbox, но сделать его более надежным:

.actions-buttons {
    display: flex;
    justify-content: flex-start; /* явное выравнивание */
    gap: 1rem; /* для последовательного интервала */
}

.button-secondary {
    margin-left: auto;
}

Понимание CSS Box Model

Чтобы действительно освоить эти концепции, полезно понять модель CSS box и как различные свойства display влияют на нее:

• Блочные элементы: Могут иметь поля (margins), отступы (padding) и примененную ширину/высоту
• Строчные элементы: Могут иметь поля и отступы, но не ширину/высоту (кроме line-height)
• Строчно-блочные элементы: Объединяют свойства обоих типов - могут иметь ширину/высоту и поля

Как объясняется на Mozilla Developer Network, свойства полей работают по-разному в зависимости от значения display элемента.

Заключение

1. Автоматические поля не работают для строчных элементов, таких как кнопки по умолчанию, потому что они преобразуются в 0
2. Flexbox меняет правила - когда родитель является flex-контейнером, дочерние элементы становятся flex-элементами с другим поведением полей
3. Чтобы добиться аналогичного выравнивания без flexbox, можно изменить свойство отображения кнопки, использовать floats, выравнивание текста или grid
4. Современный CSS рекомендует flexbox или grid для задач компоновки, так как они более гибкие и поддерживаемые
5. Всегда учитывайте свойство display при применении margin auto - это важно для понимания, почему поля ведут себя по-разному в разных контекстах

Хорошая новость в том, что современный CSS делает выравнивание гораздо проще, чем раньше. Как только вы поймете эти основные принципы, вы сможете уверенно выбирать правильный метод компоновки для любой ситуации.

Источники

1. Особая магия flexbox и автоматических полей | CSS-Tricks
2. Как работают автоматические поля в Flexbox | CSS-Tricks
3. Исправление проблем с CSS margin auto, не работающим - Weekend Projects
4. margin-left - CSS | MDN
5. html - margin:auto; не работает для строчно-блочных элементов - Stack Overflow
6. Когда Margin: auto; будет работать и не будет работать? - Форумы SitePoint
7. Почему margin:0 auto; не работает на этой кнопке ввода? - Stack Overflow