До появления CSS flexbox layout было много странных способов управлять макетом HTML-элементов. Использование в горизонтальном направленииfloatКонтролируйте выравнивание по левому и правому краям, если не обращать внимания, вокруг будут летать плавающие элементы~. В вертикальном направлении еще более спорно: либо вручную вычислить высоту, а затем вычислить центральную точку, либо использоватьline-heightа такжеheightкомбинация, либо с девятью из десяти недействительнаvertical-alignсвойства бла-бла-бла. С момента появления flex-box вроде все понятно, с различными горизонтальными и вертикальными выравниваниями, а распределение места на ваше усмотрение. Конечно пользоваться им не просто хорошо, да и пользоваться им непросто.Сегодня я расскажу вам о flex-box layout.После прочтения вы сможете им умело пользоваться!
2-минутное видео для начинающих:Освойте CSS Grid Layout за 2 минуты
Пример версии реального HTML-кода (не изображения):Пожалуйста, нажмите здесь, чтобы посетить(Примеры представляют собой настоящий HTML-код, свойства можно просмотреть с помощью инструментов разработчика Chrome.
Включить раскладку Flexbox
Предположим, у вас есть следующая структура html:
<div class="flex">
<div class="flex1">Flex 1</div>
<div class="flex2">Flex 2</div>
<div class="flex3">Flex 3</div>
</div>
ОдинdivКонтейнер содержит триdivДочерние элементы, расположенные в соответствии с макетом по умолчанию. потому чтоdivявляется элементом блочного уровня, каждыйdivЗанимает всю строку пространства:
Если вы хотите включить гибкий макет контейнера, вам нужно только указать его в css.flexнастраиватьdisplay: flexсвойство, и чтобы продемонстрировать эффект, я добавил к нему высоту 100px:
display: flex;
height: 100px;
Вы можете видеть, что три элемента внутри автоматически превращаются в строку, потому что flex по умолчанию расположен в строках. Макет Flexbox — это одномерный макет, состоящий из строк или столбцов.
Выравнивание
Макеты Flex имеют неявное координатное пространство с главной осью по горизонтали и поперечной осью по вертикали:
justify-content
Для управления выравниванием главной оси (то есть горизонтального направления) используйтеjustify-contentатрибут, он имеет следующие методы выравнивания:
flex-start
flex-start— это значение по умолчанию, и если это привычка чтения текста слева направо (LTR), оно выравнивается по левому краю. Из-за выравнивания по умолчанию нет никакой разницы с приведенным выше примером:
justify-content: flex-start;
center
Выравнивание по центру, весь flex-контейнер выравнивается по центру страницы:
flex-end
Выровнять вправо:
space-between
Выровняйте оба конца, это выравнивание заключается в том, что первый и последний элементы соединяются, а средний элемент делит пополам оставшееся пространство:
space-evenly
Чтобы разбросать выравнивание, все элементы делят пространство поровну:
space-around
а такжеspace-evenlyАналогично, но левое и правое поля составляют 1/2 биссектрисы.
align-items
Управляет выравниванием в направлении поперечной оси (т. е. в вертикальном направлении) с помощьюalign-itemsАтрибут, существуют следующие методы выравнивания:
stretch
stretchдаalign-itemsЗначение по умолчанию , автоматически растягивает дочерние элементы до высоты контейнера, поэтому в предыдущем примере дочерние элементы занимают контейнер в вертикальном направлении, пока вы меняете высоту контейнера.align-itemsзначение, оно становится высотой содержимого.stretchЭффект выравнивания следующий:
flex-start
Выровняв по верху, по верху поперечной оси видно, что дочерний элемент больше не занимает ширину контейнера:
center
Выровнять по центру:
flex-end
Выровнять по низу:
baseline
Выравнивание базовой линии, если размер текста дочернего элемента и высота строки отличаются, дочерний элемент будет выровнен в соответствии с базовой линией текста:
.flex2 {
font-size: 24px;
}
еслиflex-startВыравнивание:
align-content
В этом разделе он будет представлен, когда мы будем говорить о разрывах строк ниже.
дочерний элемент переопределяет выравнивание
Дочерние элементы могут быть установленыalign-selfдля контроля вашего выравнивания по поперечной оси, например..flex3Дочерние элементы выровнены по вертикали снизу:
.flex {
display: flex;
align-items: flex-start;
}
.flex3 {
align-self: flex-end;
}
Управление выравниванием дочерних элементов в горизонтальном направлении неjustify-selfсвойства, вместо этого используйтеmarginсвойство, установив для левого или правого поля значениеautoКонтроль горизонтального выравнивания, напримерflex3Крайний справа:
.flex3 {
margin-left: auto;
}
Расположение
flex поддерживает расположение строк и столбцов. При расположении в столбцах главная и поперечная оси меняются местами, но оси, управляемые align-items и justify-content, остаются неизменными, т.е.align-itemsИли управлять поперечной осью,justify-contentУправление шпинделем:
Таким образом, выравнивание по горизонтали становится использованиемalign-items, в вертикальном направлении используйтеjustify-content.
Чтобы сделать гибкую линию в столбцах, просто установите:
flex-direction: column;
Давайте рассмотрим несколько примеров:
Выровнять горизонтальный центр
.flex {
display: flex;
flex-direction: column;
align-items: center;
}
Выровнять по центру по вертикали
.flex {
display: flex;
flex-direction: column;
justify-content: center;
}
Кроме того, гибкая компоновка также может поддерживать обратную компоновку строк и столбцов, что эквивалентно перевороту на 180 градусов относительно центральной линии контейнера:
row-reverse
.flex {
display: flex;
flex-direction: row-reverse;
}
column-reverse
Режим столбца переворачивается по вертикали:
.flex {
display: flex;
flex-direction: column-reverse;
}
соотношение пространства
Дочерние элементы могут быть установленыflexсвойства для настройки пропорции пространства, напримерflex2Занимать в 2 раза больше других дочерних элементов по горизонтали можно задать:
.flex1,
.flex3 {
flex: 1;
}
.flex2 {
flex: 2;
}
Flex-basis
Прежде чем представить flex-basis, давайте поговорим о концепцииmain size, то есть размер направления главной оси, то в режиме строчной компоновки, то есть размер в горизонтальном направлении, это собственно ширина подэлемента, а в столбцовом режиме - высота подэлемента и соответствующегоcross size, то есть высота дочернего элемента в режиме строки и ширина в режиме столбца.
а такжеflex-basisиспользуется для установкиmain size, он будет иметь более высокий приоритет, чемwidth.Его значение по умолчаниюauto, то есть в строчном режиме, если у дочернего элемента задана ширина, она берется из этого значения ширины, а если не задана, то это ширина содержимого. использоватьflex-basis, который может управлять как шириной в режиме строки, так и высотой в режиме столбца.
Давайте посмотрим на пример, измените предыдущий дочерний элемент на фиксированную ширину, например200px:
.flex > * {
flex-basis: 200px;
}
Это делает каждый дочерний элемент шириной 200 пикселей:
Если вы добавитеwidthсвойства, открытие не вступает в силу:
.flex > * {
flex-basis: 200px;
width: 250px;
}
min-widthдля обеспечения минимальной ширины:
.flex > * {
flex-basis: 200px;
min-width: 250px;
}
Аналогично, в столбцовом режимеflex-basisстановится высотой, потому что высота контейнера100px, здесь высота дочернего элемента установлена равной30pxВсего90pxоказывать влияние:
.flex {
flex-direction: column;
}
.flex > * {
flex-basis: 30px;
}
Точно так же вы также можете использоватьmin-heightконтролировать минимальную высоту.
зум
(Следующие примеры предполагаются в линейном режиме.) В предыдущем разделе кратко говорилось о пропорции пространства дочерних элементов flex.Здесь масштаб вынесен отдельно для иллюстрации: в дополнение к настройке роста дочерних элементов flex, вы также можете регулировать усадку иflexОбоснование свойств (следующий подраздел).
flex-grow
Сначала посмотрите на рост,flex-grow, это свойство представляет собой долю оставшегося пространства, занимаемого дочерними элементами, когда у гибкого контейнера есть оставшееся пространство. Например, дать.flex2Настройки дочернего элемента:
.flex2 {
flex-grow: 1;
}
Другие элементы сохраняют ширину по умолчанию (то есть ширину содержимого, flex-basis имеет значение auto), затем.flex2автоматически увеличится и займет все оставшееся место:
Если установить для всех трех элементов значение 1, то все элементы будут автоматически увеличиваться и занимать 1/3 места:
использоватьflex-growВы можете свободно регулировать соотношение элементов, что очень подходит для некоторых плавающих макетов.
flex-shrink
Сжатие дочерних элементов означает, как сжиматься, когда их ширина превышает flex-контейнер. пройти черезflex-shrinkЧтобы установить значение, чем больше значение, тем больше степень усадки, напримерflex-shrink: 2элементов будет большеflex-shrink:1Уменьшите значение в 2 раза:
.flex1,
.flex3 {
flex-basis: 600px;
flex-shrink: 1;
}
.flex2 {
flex-basis: 600px;
flex-shrink: 2;
}
Для удобства демонстрации я установил основной размер (ширину) всех дочерних элементов flex в 600px. Под моим монитором ширина flex-контейнера составляет 728 пикселей, а сумма трех дочерних элементов равна 1800 пикселей, что явно превышает ширину контейнера, поэтому в соответствии с правилами сжатия, определенными выше,.flex2уменьшится в 2 раза.flexа также.flex3сужение пространства. В приведенном ниже примере.flex1а также.flex3ширина становится332px,в сравнении с600pxсокращать268px,Так.flex2вот-вот сожмется536px (268px * 2)ширина, то в итоге получится64px (600px - 536px)ширина:
Давайте поговорим о свойстве flex
законченныйflex-grow,flex-shrinkа такжеflex-basisПосле этого взгляните на этоflexАтрибут, который на самом деле является аббревиатурой первых трех атрибутов, значение по умолчанию равно0 1 auto, то есть не растет, а сжимается, с коэффициентом сжатия 1 и flex-базисом auto, который берется из заданной пользователем ширины или ширины содержимого.
Значение flex может быть одним из следующих:
- Укажите номер - например
flex: 1, что эквивалентноflex: 1 1 0, то есть автомасштабирование, масштаб равен 1, а flex-basis равен 0. - авто - эквивалентно
flex: 1 1 auto. - Укажите два числа - первое
flex-grow, второе, если это число, то считаетсяflex-shrink, если ширина, тоflex-basis. - Укажите три значения - соответственно
flex-grow,flex-shrinkа такжеflex-basis.
Итак, поflexСвойства могут быть удобно установлены одновременноflex-grow,flex-shrinkа такжеflex-basisэти три значения.
Разрыв строки
Если дочерний элемент имеет фиксированную ширину и превышает ширину контейнера и не может сжиматься, вы можете использоватьflex-wrapдля переноса элементов таким образом, чтобы каждая строка элементов не превышала ширину контейнера.Основное различие между этим макетом и макетом сетки css заключается в том, что он не может контролировать пропорции отдельных строк и столбцов, например, охватывать строки и столбцы, а также не может свободно размещать элементы в определенных позициях.. В приведенном ниже примере добавляются 2 новых элемента, всего 5 элементов, каждый с основным размером 300 пикселей, а затем выполняется перенос после превышения ширины:
.flex {
flex-wrap: wrap;
}
.flex > * {
flex-shrink: 0;
flex-basis: 300px;
}
align-content
Если во флекс-контейнере включено перенос строк, через него можно передать две или более строк содержимого.align-contentатрибут для управления правилами расположения между строками на поперечной оси, его значением иjustify-contentВ основном то же самое, вот несколько из них, все еще использующих flex-контейнер предыдущих трех элементов, каждый контейнер имеет ширину 300 пикселей и переносится после превышения:
.flex {
display: flex;
flex-wrap: wrap;
}
.flex > * {
flex-basis: 300px;
}
center
Центрировать по вертикали:
space-between
Выровняйте оба конца:
Проблемы с вложенными flex-контейнерами
Если структура HTML сложная и есть вложенные flex-контейнеры, очень вероятно, что возникнет проблема, заключающаяся в том, что вложенные flex-контейнеры не могут сжиматься автоматически, даже если установленоflex-shrink. Например, есть следующая структура html:
<div class="flex">
<div class="flex1">Flex 1</div>
<div class="flex2">Flex 2</div>
<div class="flex3">Flex 3</div>
<div class="flex4">
<p>
这是一段很长很长很长很长很长很长很长很长很长很长很长很长长很长很长很长很长很长长很长很长很长很长很长的文本
</p>
</div>
</div>
Это добавляет новый дочерний элемент к предыдущему гибкому контейнеру..flex4, все эти 4 дочерних элемента установлены наflex: 1разделить пространство пополам, но.flex4себяflexКонтейнер макета содержит длинную строку текста. Я хочу, чтобы он автоматически отображал многоточие после того, как он слишком длинный. Его код CSS:
.flex {
display: flex;
}
.flex > * {
flex: 1;
}
.flex4 {
display: flex;
flex: 1;
}
.flex4 > p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Как видите, в конце он должен занимать 1/4 места..flex4, поскольку текст не может переноситься, он напрямую растягивает flex-контейнер и сжимает три других дочерних элемента в минимальное пространство, он должен обрезать текст и отображать многоточие, почему это так? Оказывается, flex-контейнерmin-widthЗначение атрибута auto, которое вычисляется самим браузером, здесь он принимает<p>Ширина элемента, делая ширину полной линией<p>ширина. Тогда, чтобы решить эту проблему, вы можете.flex4Этот вложенный гибкий контейнерmin-widthизменить на0, т. е. минимальная ширина0, то вы можете нормально сжиматься:
.flex4 {
display: flex;
flex: 1;
min-width: 0;
}
Суммировать
На этом этапе вводится вся флекс-вёрстка, там ещё много чего, но это не сложно. Я полагаю, что вы сможете понять его использование на примерах.Следующее суммирует основные моменты:
- Включить использование гибкого макета
display: flexАтрибуты. - Гибкая компоновка имеет главную ось и поперечную ось, которые используются соответственно.
justify-contentа такжеalign-itemsКонтролирует выравнивание. - Поддерживается упорядочивание по строке или столбцу, используйте
flex-direction, а также поддерживаетrow-reverseа такжеcolumn-reverseрасположены в обратном порядке. - дочерние элементы могут быть
flexкраткая форма илиflex-grow,flex-shrink,flex-basisдля настройки пропорций пространства и масштабирования элементов. - пройти через
flex-wrapВы можете установить перенос дочерних элементов flex. - вложенный
flexПроблемы с масштабированием контейнера.
Вы научились этому? Если у вас есть какие-либо вопросы, пожалуйста, оставьте комментарий.