Flexbox: выравнивание с Auto Margin

внешний интерфейс CSS

оригинал:Flexbox: Aligning with Auto Margins, by Samantha Ming

align-selfУправляет выравниванием flex-элементов по поперечной оси. Но тут возникает вопрос: «Есть ли какое-либо подобное свойство на главной оси», например, «оправдать себя» 🤔 Хороший вопрос! Но ответ нет 😅. Но есть существующее свойство, которое можно использовать, и это автоматическая маржа! Мы можем использовать его для управления горизонтальным выравниванием указанного элемента.

На самом деле, вы также можете использоватьauto marginУправляет вертикальным выравниванием указанного элемента.

Кроме того, если вы установите проект Flexmargin: auto(относительно четырех направлений: левого, правого, верхнего и нижнего, которые устанавливаются одновременно), может быть достигнут даже эффект вертикального центрирования элементов Flex в контейнере!

понять маржу

Увидев это, вы можете немного растеряться. зачем использоватьmargin-left: auto, элемент Flex был сдвинут вправо, зачем использоватьmargin-right: autoПосле этого элемент Flex был сдвинут влево. Это немного нелогично, не волнуйтесь, я чувствую то же самое 😅

все еще помнюmarginосновная концепция? По сути, это добавление к элементуинтервал. Напримерmargin-left: 50px, который будет добавлен слева от элемента50px, сдвигает элемент на некоторое расстояние вправо. использоватьmargin-left: auto,autoбудет вычислять все текущее доступное пространство, а затем размещать это пространство слева от элемента, сдвигая элемент полностью вправо.

margin интервал Представление
margin-left добавить разделитель слева сдвинуть элемент вправо
margin-right добавить разделитель справа сдвинуть элемент влево
margin-top добавить пробел сверху толкнуть элемент вниз
margin-bottom добавить пробел ниже подтолкнуть элемент вверх
margin Добавьте пространство к каждому лицу Элемент вертикально центрирован

Auto Margin имеет высокий приоритет 🏆

При использовании в проекте Flexauto margin, то его приоритет выше, чем настройки атрибута выравнивания в других местах, что эквивалентно недопустимым настройкам в других местах 💪

Почему?

Примечание. Если оставшееся пространство выделено для автоматического поля, настройка свойства выравнивания в этом измерении не будет иметь никакого эффекта, поскольку поле уже израсходовало оставшееся пространство (после того, как flex-элемент был выделен).

С точки зрения неразвития,auto marginЭто какой-то глупый друг, которого вы пригласили с добрыми намерениями, который живет в вашем доме, а потом думает, что весь дом принадлежит ему, и занимает все место. У тебя нет такого друга? Я тоже нет 😳 Но я думаю вы должны понять суть, которую я хочу донести😂

Случай автоматической маржи

Ниже перечислены некоторыеauto marginПример очень яркий! Используйте его, чтобы создать свой любимый стиль оформления панели навигации 🤩

Что я должен использовать? 🤔

Я гарантирую, что вы немного запутались, что использовать или когда переключаться (это вопрос выбора, верно) 😅. Вот как я это делаю:

  1. Приоритетное использованиеFlexboxАтрибуты
  2. Если вы не можете добиться эффекта, используйте автомаржу

причина? Я нахожу свойства Flexbox более интуитивными и более явными, чем «автоматическая маржа». Давайте сравним:

.child {
  align-self: flex-end;
}

vs

.child {
  margin-top: auto;
}

Даже если вы ничего не узнали о Flexbox. Буквально взглянув на код, мы можем сделать вывод, чтоchildсоответствуетконец. Пойтиmargin-top: auto, у вас может немного закружиться голова, какого эффекта макета он пытается достичь. Конечно, это всего лишь мое предложение. Вы можете сделать правильный выбор для себя и своей команды 😊

ресурс

(над)

Категории