Независимо от того, делает ли ваше приложение мобильным или адаптивно настраивается, если вы когда-либо работали над пользовательским интерфейсом, вы, вероятно, понимаете разочарования, связанные с CSS:
Чтобы обойти любые проблемы, с которыми вы могли столкнуться, вы могли бы обратиться к фреймворку, такому как Bootstrap, взглянуть на CSS Grid или, если вы старой школы, застряли с плавающей точкой. Все эти варианты имеют свои преимущества, но, как и все в разработке, имеют некоторые недостатки. Использование фреймворка означает, что вы должны жить с импортом всего этого в свой проект. CSS Grid иногда может показаться немного неуклюжим, особенно если вы новичок в этом. Поплавки хороши, но часто не так выразительны, как в идеале.
Вот тут-то и приходит Flexbox. Для меня Flexbox находится между CSS Grid и плавает. Он предлагает пользователям гибкость и (близкий к тому же) контроль, который будет иметь сетка с простотой использования поплавков при работе, чтобы контролировать расположение элементов в контейнере.
Вам также могут понравиться:
CSS-хитрости, которые сделают вашу работу проще .
Начиная
Для начала давайте разберемся, как работает Flexbox. Элементы в гибком контейнере выровнены на основе горизонтальной и вертикальной осей (называемых «строка» и «столбец» соответственно). Пользователи могут определить, какая из них является «главной» осью, а какая — «перекрестной» осью. Главная ось будет определять, как дочерние элементы будут выровнены в контейнере.
Например, допустим, у меня есть контейнер, содержащий три фиктивных элемента: «foo», «bar» и «merp». Если бы я должен был установить основную ось как «ряд» (горизонтальный), то элементы были бы расположены горизонтально рядом друг с другом, как это (извините за хрень):
Если бы главная ось была установлена на столбец (вертикальный), то элементы были бы расположены друг над другом, как это:
Мы также можем обратить поток элементов вдоль оси так, чтобы «merp» стал нашим первым элементом, а «foo» — нашим третьим, как это для горизонтального выравнивания:
и это для вертикального выравнивания:
Как насчет Кодекса?
Чтобы сделать элемент Flexbox, вам нужно установить его displayзначение flexследующим образом:
CSS
xxxxxxxxxx
1
.my-container {
2
display: flex;
3
}
Чтобы манипулировать главной осью вашего контейнера, все, что вам нужно сделать, это установить значение flex-directionв:
row(горизонтальное выравнивание).column(вертикальное выравнивание).row-reverse(обратное горизонтальное выравнивание).column-reverse(обратное вертикальное выравнивание).
Итак, создание контейнера, у которого столбец является главной осью, будет выглядеть примерно так:
CSS
xxxxxxxxxx
1
.my-container {
2
display: flex;
3
flex-direction: column;
4
}
Примечание : Flex-direction по умолчанию является строкой, если значение не указано.
Обоснование и выравнивание элементов
Перемещать элементы во Flexbox довольно просто (и это большая причина, почему я так люблю использовать этот инструмент). Существует четыре основных свойства, которые управляют пространством внутри Flexbox:
justify-content: контролирует, как элементы располагаются поперек главной оси контейнера.align-items: контролирует, как элементы располагаются поперек оси контейнера.align-content: контролирует, как элементы располагаются поперек оси контейнера, когда на этой оси есть дополнительное пространство. (Я не использую этого друга все это часто, но когда я делаю, я счастлив, что это рядом.)align-self: управляет выравниванием отдельного элемента по поперечной оси контейнера. (Это свойство устанавливается для дочернего элемента и перезаписывает любой предыдущий набор выравнивания для родительского элемента).
обосновывать-контент
Justify-content принимает следующие значения в качестве входных данных (все примеры центрированы по их поперечной оси):
flex-start: переносит дочерние элементы в начало главной оси.flex-end: переносит дочерние элементы в конец главной оси.center: вытягивает дочерние элементы в центр главной оси.space-evenly: распределяет дочерние элементы по главной оси с равномерным интервалом между ними.space-between: помещает первый и последний элементы как можно ближе к flex-start и flex-end и равномерно распределяет средние элементы между ними.space-around: добавляет разумный запас между элементами flex-start, flex-end и дочерними, с равномерным пространством между дочерними элементами.
Примечание . Во всех этих примерах строка является главной осью, но те же принципы будут применяться к контейнеру, где столбец (или обратный) является главной осью.
ALIGN-элементы
Align-content принимает следующие значения в качестве входных данных (опять же, все примеры центрированы по их главной оси):
flex-start: переносит дочерние элементы в начало поперечной оси.flex-end: приводит дочерние элементы к концу поперечной оси.center: вытягивает дочерние элементы в центр поперечной оси.stretch: вытягивает дочерние элементы для покрытия поперечной оси.
Align-контент
Различия между align-content и align-items трудно увидеть с помощью только одной строки дочерних элементов, поэтому в следующих примерах я покажу вам два этих элемента с одинаковыми значениями свойств. (Align-content будет слева, а align-items будет справа.)
flex-start: переносит дочерние элементы в начало поперечной оси.flex-end: приводит дочерние элементы к концу поперечной оси.center: вытягивает дочерние элементы в центр поперечной оси.stretch: вытягивает дочерние элементы для покрытия поперечной оси.(По сути, то же самое для обоих):
Примечание : я не буду переходить align-self, как с предыдущими примерами. Просто знайте, что вы можете назначить его дочернему элементу внутри flex-контейнера, и это значение перезапишет любое ранее назначенное свойство выравнивания.
Flex-Wrap
Последнее свойство, которое мы собираемся коснуться в этой части, это flex-wrap. Это просто дает вам возможность контролировать, как контейнер справляется с переполнением элементов. Значения, которые принимает свойство:
wrap: переносит содержимое на следующую строку в контейнере.wrap-reverse: переносит содержимое на следующую строку в контейнере, но, шокирующе, в обратном порядке.nowrap: не позволяет оборачивать элементы в контейнер.
Примечание . Если вы хотите сохранить целую строку CSS («oohs» и «ahhhhs» вокруг), вы можете использовать flex-flowсвойство для указания flex-directionи flex-wrap. аналогично тому, как вы бы указали, что вы хотите, чтобы верхний и нижний и правый и левый поля, границы или отступы были одинаковыми. Например, если вы хотите иметь контейнер с вертикальной главной осью и обернутой в обратном направлении, вы можете написать:
xxxxxxxxxx
.my-container {
display: flex;
flex-flow: column wrap-reverse;
}
Here, the first «argument» is the value for flex-direction, while the second is the value for flex-wrap.
Conclusion
That finishes up this introductory tutorial to Flexbox in CSS. In later parts of this series, we’ll be going over some more complicated topics and putting what we’ve learned into practice to build a basic layout for a site.