Flexbox: выравнивание с автоматическими полями

Горизонтальное выравнивание с автоматическими полями

Вы узнали, что align-self дает вам контроль над дочерним элементом на поперечной оси. Ваш следующий вопрос может быть «есть ли что-то похожее для главной оси», скажем «оправдать себя» ? Отличный вопрос! К сожалению, ответ НЕТ ?. Но у нас есть свойство CSS, которое мы можем использовать! И это авто наценки. Мы можем использовать его для контроля горизонтального выравнивания конкретного элемента.

1xkhjxzchti27p26b545mgut Flexbox: выравнивание с автоматическими полями

Выравнивание по вертикали с автоматическими полями

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

2g2vcrmhxn2gvz1hhna8u Flexbox: выравнивание с автоматическими полями

Центрирование выравнивания с автоматическими полями

И если вы примените все поля (слева, справа, сверху, снизу) с сокращенными полями. Вы фактически центрируете этого конкретного ребенка в горизонтальном и вертикальном направлении!

3m4cmhw40sgpi55xht4yt Flexbox: выравнивание с автоматическими полями

Auto Margins Примеры

Вот несколько примеров. Здорово расположить навигационную панель в том стиле, который вы предпочитаете.

4sjvm5egc4i5xeth5d0t Flexbox: выравнивание с автоматическими полями

Который я должен использовать ?

Могу поспорить, что ваша голова кружится сейчас, чтобы использовать, что и когда использовать что (проблема с выбором, я прав) ?. Вот как я это делаю:

  1. Всегда используйте свойства Flexbox
  2. Если это невозможно, используйте авто поля

Рассуждая? Я думаю, что свойства Flexbox более интуитивно понятны и читаются более явно, чем «автоматические поля». Проверь это:

против

Даже если у вас нет знаний о Flexbox. Просто читая этот код, вы можете сделать вывод, что childон выравнивается до конца .

Добавить комментарий

Войти с помощью: