48 маленьких картинок «Раз и навсегда» покажут вам красоту гибкой верстки.

предисловие

В последнее время в проекте столкнулся с проблемами верстки, иногда приходится накладывать много стилей и верстки, что в определенной степени увеличивает объем кода, есть ли более удобный метод верстки? 👇

48 изображений проведут вас от 0 до 1, чтобы освоить гибкий макет.

flex布局В определенной степени упростить наш макет сложно, и в следующей главе мы познакомимся с его использованием👇

flex-布局详解

Если вам нужна карта Xmind из этой статьи, перейдите на официальный аккаунт--Интерфейс UpUp,Ответитьflexключевые слова подойдут.

Основные понятия флекса

Чтобы освоить гибкий макет, вам нужно понять две концепции:轴и容器👇

flex布局基本概念

Из приведенного выше рисунка мы разделяем гибкий макет на две части:轴и容器.

ось

главная ось
поперечная ось

контейнер

родительский контейнер (контейнер)
Подконтейнер (предмет)

Сделать фотографию,flex布局Он включает 12 свойств CSS, 6 для родительского контейнера и 6 для дочернего контейнера.

Далее мы сначала разберем общие атрибуты, а необычные поместим в расширенную часть для сортировки.

ось

мы знаем,轴включают主轴и交叉轴, то как определяются их направления? Мы понимаем это прямо из картинки👇

flex轴的概念

по умолчанию,шпиндельНаправление слева направо,поперечная осьПерпендикулярно главной оси, 90 градусов против часовой стрелки, тогда посмотримflex-directionкак определяется шпиндель. Прежде чем говорить об этом, нам нужно понять👇

Поперечная ось определяется главной осью, которая, в свою очередь, определяется направлением изгиба.
Свойство flex-direction устанавливается в родительском контейнере, чтобы оно могло вступить в силу.

flex-direction: row | row-reverse | column | column-reverse

flex-direction取值

Первый макет выглядит следующим образом👇

<div class="wrapper">
        <div class="flex1">子盒子#flex1: 1 </div>
        <div class="flex2">子盒子#flex2: 1 </div>
</div>

Далее, давайте посмотрим на их эффекты👇

flex-direction: row

当你给父盒子(wrapper)设置属性
flex-direction: row

Эффект👇

flex-direction-row

в заключении

Основная ось гибкого контейнера определяется в том же направлении, что и текст. Начальная точка главной оси и конечная точка главной оси находятся в том же направлении, что и содержимое.
Простое пониманиеОсновная ось идет горизонтально вправо

flex-direction: row-reverse

当你给父盒子(wrapper)设置属性
flex-direction: row-reverse

Эффект👇

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

в заключении

Ведет себя так же, как ряд, но заменяет начальную точку главной оси и конечную точку главной оси.
Простое пониманиеГлавная ось слева в горизонтальном направлении, противоположное направлению текста.

flex-direction: column

当你给父盒子(wrapper)设置属性
flex-direction: column

Эффект👇

flex-direction-column

Видно, что расположение подбоксов изменилось, образуя расположение по оси Y, а способ записи такой же, как и расположение.

в заключении

Основная ось гибкого контейнера совпадает с осью блока. Начальная точка основной оси совпадает с конечной точкой основной оси, а также передней и задней точками режима письма.
Простое понимание состоит в том, что главная ось становится направлением оси Y, и направление выкладывается сверху вниз.

flex-direction: column-reverse

当你给父盒子(wrapper)设置属性
flex-direction: column-reverse

Эффект👇

flex-direction-column-reverse

Как видите, макет подбокса аналогичен макету столбца, с той лишь разницей, что изменилось направление.

в заключении

производительность иcolumnТо же самое, но начальная и конечная точки шпинделя заменены
Простое понимание состоит в том, что главная ось становится направлением оси Y, а направление — снизу вверх, что противоположно направлению письма.

контейнер

Здесь он делится народительский контейнериподконтейнер, давайте сначала посмотрим на родительский контейнер👇

родительский контейнер

justify-content: Устанавливает выравнивание дочерних элементов в направлении главной оси
выравнивание элементов:Устанавливает выравнивание дочерних элементов в направлении поперечной оси

父容器常见属性

justify-content

Это свойство устанавливается в родительском контейнере,Определяет выравнивание дочерних элементов в направлении главной оси, давайте посмотрим на их конкретное выступление👇

justify-content: flex-start

当你给父盒子(wrapper)设置属性
justify-content: flex-start

Эффект👇

justify-content-flex-start

в заключении, дочерние элементы выравниваются вдоль главной оси.

justify-content: flex-end

当你给父盒子(wrapper)设置属性
justify-content: flex-end

Эффект👇

justify-content-flex-end

в заключении, дочерние элементы выравниваются по конечной точке направления главной оси.

justify-content: center

当你给父盒子(wrapper)设置属性
justify-content: center

Эффект👇

justify-content-center

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

justify-content: space-between

当你给父盒子(wrapper)设置属性
justify-content: space-between

Эффект👇

justify-content-space-between

в заключении, дочерние элементы находятся в направлении главной осиВыровняйте оба конца с одинаковым интервалом между элементами.

justify-content: space-around

当你给父盒子(wrapper)设置属性
justify-content: space-around

Эффект👇

justify-content-space-around

в заключении, дочерние элементы находятся в направлении главной осиРасполагает каждый элемент равномерно, выделяя одинаковое пространство вокруг каждого элемента.

align-items

Это свойство устанавливается в родительском контейнере,Определяет выравнивание дочерних элементов в направлении поперечной оси, давайте посмотрим на их конкретное выступление👇

align-items: flex-start

当你给父盒子(wrapper)设置属性
align-items: flex-start

align-items-flex-start

в заключении, дочерние элементы выравниваются в направлении поперечной оси.

align-items: flex-end

当你给父盒子(wrapper)设置属性
align-items: flex-end

align-items-flexend

в заключении, дочерние элементы выравниваются по концам в направлении поперечной оси.

align-items: center

当你给父盒子(wrapper)设置属性
align-items: center

align-items-center

в заключении, дочерние элементы выравниваются по центру в направлении поперечной оси.

align-items: baseline

当你给父盒子(wrapper)设置属性
align-items: baseline

align-items--baseline

в заключении, подэлементы выравниваются с базовой линией текста в направлении поперечной оси.Если детали неясны, вы можете самостоятельно использовать Baidu.

align-items: stretch

当你给父盒子(wrapper)设置属性
align-items: stretch

align-items--stretch

в заключении, это свойство установлено по умолчанию, если у элемента нет высоты или установлено значение auto, он будет занимать высоту всего контейнера.

подконтейнер

первый взгляд на картинку

子容器常见的属性

Для подконтейнеров вот два свойства 👇

flexСвойство Определяет, как масштабируется главная ось.
- Подконтейнеры эластичны, они автоматически заполняют оставшееся пространство, а коэффициент расширения подконтейнеров определяетсяflexатрибутивное решение.
- flex — это аббревиатура для множественных свойств, которая позволяет последовательно записывать 1-3 значения.Подробности смотрите на рисунке выше.
align-selfАтрибутыИндивидуально настроить расположение подконтейнеров вдоль поперечной оси
- Каждый подконтейнер может быть индивидуально определен вдоль поперечной оси.
- Значение этого свойства совпадает со значением свойства align-items в родительском контейнере. Если они совпадают, подконтейнер будет использовать то же значение.align-selfна основе атрибутов.

гибкие правила действий

Сокращение для трех свойств, сокращение от flex-grow flex-shrink flex-basis
Часто используемое упрощенное письмо 👇
- flex:1 —> flex:1 1 0%;
- flex:3 —> flex:3 1 0%;
- Примечание. Макет flexbox и исходный макет — это две концепции, некоторые свойства CSS не работают в flexbox, например: float, clear, column, vertical-align и т. д.

注意👉flex-grow  flex-shrink flex-basis 这三个属性会在后续介绍

Для решения конкретной проблемы со значением гибкости вы можете обратиться к следующему рисунку👇

flex取值问题

правила действия по выравниванию

// 起始端对齐
align-self : flex-start;

align-self-flexStart

// 末尾段对齐
align-self : flex-end;

align-self-flex-end

基线对齐// 末尾段对齐
align-self : baseline;

align-self-baseline

Как видите, то, как они выровнены, является базовой линией первой строки текста.

拉伸对齐
align-self : stretch;

align-items-stretch

flex для более глубокого понимания

Если вы освоите общие атрибуты, представленные выше, вы в основном сможете удовлетворить потребности ежедневной разработки и верстки, а остальные атрибуты будут отсортированы дальше.flex布局进阶者.

родительский контейнер

flex-wrapУстановить перенос строки
- Может ли абсолютный подконтейнер выбрать перенос, вообще говоря, есть три состояния, если он поддерживает перенос, он также поддерживает перенос в обратном порядке.
flex-flowУстановить комбинацию осей и обтекания
- Сокращение для flex-direction и flex-wrap.
- Так что просто освоить его,flex-directionиflex-wrapВот и все.
align-contentВыравнивание нескольких линий вдоль поперечной оси
- Когда подконтейнеры расположены в несколько строк, задайте выравнивание между строками.

flex-wrap

Установите метод переноса строк субконтейнера, обычно это три значения👇

flex-wrap: wrap | nowrap | wrap-reverse

Три случая 👇

// 允许换行
flex-wrap : wrap

Эффект👇

flex-wrap-wrap

// 不允许换行
flex-wrap : nowrap

Эффект👇

flex-wrap-nowrap

// 允许逆向换行
flex-wrap : wrap-reverse

Эффект👇

flex-wrap-wrapReverse

flex-flow

Сначала фото 👇

flex-flow取值

更多取值信息请查看 flex-directionиflex-wrap

Вы можете проверить это на MDN или поставить предыдущийflex-directionиflex-wrapПосле прочтения значения двойки нет проблем с использованием этого свойства. Здесь не слишком много примеров. Есть три случая для значения.👇

Установите значение flex-direction отдельно, например
- ```
flex-flow: row | column
```
Установите значение flex-wrap отдельно
- ```
flex-flow: wrap | nowrap | wrap-reverse
```
Установите оба значения одновременно
- ```
flex-flow: row wrap
flex-flow: column nowrap
```

align-content

Это свойство определяет расположение подконтейнеров на поперечной оси, то есть выравнивание.

Первая картинка 👇

align-content取值

По этим значениям посмотрим на эффект макета👇

// 起始端对齐
align-content: flex-start

Эффект👇

align-content-flex-start

// 末尾段对齐
align-content: flex-end

Эффект👇

align-content-flex-end

// 居中对齐
align-content: center

Эффект👇

align-content-center

// 等间距均匀分布
align-content: space-between

Эффект👇

align-content-space-around

// 等边距均匀分布
align-content: space-around

Эффект👇

align-content-space-around

// 拉伸对齐
align-content: stretch

Эффект👇

align-content-stretch

// 基线对齐
align-content: baseline

Эффект👇

align-content-baseline

подконтейнер

flex-growУстановить коэффициент расширения
flex-shrinkУстановить коэффициент сжатия
flex-basisУстановите базовый размер
orderУстановить порядок сортировки

flex-grow

Соотношение упругого расширения подконтейнера, в простом понимании, заключается в пропорциональном распределении оставшегося пространства подконтейнеру.

Давайте посмотрим на пример

flex-grow取值

flex-shrink

Коэффициент упругой усадки подконтейнера. Простое понимание заключается в том, что когда ваш подконтейнер превышает часть, соответствующее значение будет вычтено из подконтейнера в соответствии с соответствующей пропорцией.

Посмотрим на эффект 👇

flex-shrink-取值为0

При значении 0 они будут переполняться, тогда мы устанавливаем для них значение👇

flex-shrink-取值为1

Таким образом, лишняя часть будет вычтена пропорционально.

flex-basis

Есть несколько моментов, на которые стоит обратить внимание 👇

Без масштабирования,flex-basisЭто работает, только если вы установите размер подконтейнера.
Когда главная ось горизонтальна, то есть 👇
- ```
flex-direction：row | row-reverse
```
- flex-basisУстановленный размер является шириной и переопределяет значение ширины.
Когда главная ось вертикальна, то есть 👇
- ```
flex-direction：column | column-reverse
```
- flex-basisУстановленный размер - это высота, и он переопределит значение высоты.

Давайте рассмотрим две ситуации 👇

当主轴为横向时
flex-direction：row | row-reverse

Эффект👇

flex-basis-主轴横向时

当主轴为纵向时
flex-direction：column | column-reverse

Эффект👇

flex-basis-主轴纵向时

order

каждого подконтейнераorderСвойство по умолчанию равно 0
установивorderЗначение свойства, которое изменяет порядок подконтейнеров.
Может быть отрицательным значением, чем меньше значение, тем выше рейтинг.

Смотрите прямо на рендеры👇

flex-order

Суммировать

На данный момент необходимо подвести итоги?

Давайте сначала посмотрим на свойства подконтейнера👇

flex-子容器属性

Взгляните на свойства родительского контейнера👇

flex-父容器属性

Общие значения атрибутов отсортированы. Для некоторых необычных значений атрибутов, пожалуйста,Перейти в MDN

❤️ Всем спасибо

Если вы считаете этот контент полезным:

Поставьте лайк и поддержите его, чтобы больше людей увидело этот контент
Обратите внимание на публичный аккаунтИнтерфейс UpUp, регулярно публиковать хорошие статьи для вас.
Если вы считаете, что это хорошо, вы также можете прочитать последние статьи TianTian (спасибо за вашу поддержку и поддержку 🌹🌹🌹):