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

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

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

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

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

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

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

Auto Margins Примеры

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

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

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

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

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

против

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

0

Автор публикации

не в сети 2 часа

admin

10K
Комментарии: 0Публикации: 331Регистрация: 21-04-2017

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

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