От автора: позиционирование CSS и HTML может быть настоящей головной болью, когда вы новичок в разработке веб-интерфейса. Но в этом посте я собираюсь научить вас тому, как решить большинство проблем позиционирования. Вам нужно знать только эти 3 свойства CSS.
Я разработчик с более чем 3-летним опытом работы. Когда я учился, я думал то же, что думаете сейчас вы. Потом я изучил flexbox, и позиционирование стало проще, чем когда-либо. Одним из лучших ресурсов для изучения flexbox является руководство на CSS Tricks. После дальнейшего использования этой функции я понял, что в большинстве случаев вам нужны только эти три свойства:
display: flex; justify-content: $value; align-items: $value;
Я позаимствую некоторые изображения из вышеупомянутого руководства. Таким образом, я хочу обеспечить, чтобы вам проще было понять, как работают свойства. Хорошо, давайте начнем.
Контекст
Прежде всего, нам нужно настроить рабочий контекст. Когда мы работаем с flexbox, у нас есть два вида элементов: контейнер и элементы внутри указанного контейнера, как вы можете видеть на изображениях ниже:
Изображение из руководства CSS Tricks по flexbox
Теперь, когда вы можете различить контейнер и его элементы, давайте проясним одну вещь: три свойства, которые мы собираемся здесь изучить, принадлежат контейнеру. Распространенная ошибка, которую совершают люди, когда начинают изучать flexbox, заключается в установке следующих свойств для дочерних элементов.
display: flex
Хорошо, первое, что нам нужно сделать, это установить для свойства display контейнера — flex.
.container { display: flex;
}С помощью этого свойства вы размещаете прямые дочерние элементы контейнера в ряд (как на рисунках выше).
justify-content
Это свойство указывает выравнивание элементов вдоль главной оси (горизонтальная ось). Мы можем видеть возможные значения и их результаты на изображении ниже:
Изображение из руководства CSS Trick по Flexbox
align-items
Третье свойство — align-items. оно определяет поведение по умолчанию для элементов вдоль поперечной оси (вертикальная ось). Теперь давайте рассмотрим все возможные значения, которые имеет это свойство, и то, как они влияют на элементы внутри контейнера.
Изображение из руководства CSS Trick по Flexbox
Благодаря этим свойствам мы можем размещать вещи именно там, где нам нужно. Но этот пост не будет полным без примеров. По этой причине я собираюсь показать вам некоторые распространенные случаи использования.
Примечание. Существует свойство, называемое flex-direction, которое меняет направление главной и поперечной осей. Будьте внимательны при использовании этого свойства и убедитесь, что знаете, что делаете.
Случаи применения
В качестве первого варианта использования мы рассмотрим упрощенную панель навигации в шапке сайта. Шапки обычно содержат элемент слева, другой справа, а иногда один или несколько посередине.
В этом примере Codepen мы сосредоточимся только на CSS внутри селектора с именем .container. Все остальные стили предназначены для придания аккуратного внешнего вида. Попробуйте поэкспериментировать с удалением элемента посередине, а затем посмотрите, что произойдет. Во втором случае, мы центрируем элемент внутри его контейнера.
Опять же, посмотрите на селектор с именем .container и поэкспериментируйте с различными значениями этих свойств.
В заключение
Ну что, просто? Поэкспериментируйте с этими свойствами и посмотрите, как они влияют на элементы, привыкните к ним, и у вас больше не возникнет проблем при работе с позиционированием. Теперь, когда вы узнали, как использовать flexbox наиболее простым и полезным способом, я хочу побудить вас узнать больше об этой функции.
Автор: Henry Tabima Giraldo
Источник: https://medium.freecodecamp.org
Редакция: Команда webformyself.