Подробный CSS Flexbox

Байду внешний интерфейс CSS flexbox

Flexbox — это мощный и гибкий макет, и эта статья посвящена его изучению.

1. Введение во Flexbox

Модуль Flexbox Layout (Flexible Box) призван обеспечить более эффективный способ формулирования, настройки и распределения макета элементов в контейнере, даже если их размер неизвестен или динамичен. Простое понимание заключается в том, что он может автоматически подстраиваться, вычислять размер элемента в пространстве контейнера и выполнять эффективную и разумную компоновку.

В макете Flexbox есть две важные концепции:Flex-контейнеры и Flex-элементы.

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

Использование флексбокса

Использование Flexbox очень простое, вам нужно только установить контейнер Flexdisplay:flexилиdisplay:inline-flex, вы можете использовать макет Flexbox для определенных операций.

Ниже приведен конкретный пример для демонстрации:

HTML-код

<div class="container">
		<div class="wrap">
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>

css-код

.container {
	width: 70%;
	height: 500px;
	margin:20px auto;
	border: 1px solid black;
}
.container .wrap {
	display: flex;
	border: 3px solid #a448cf;
	margin:20px;
    width:80%;
	height:80%  
}
.container .wrap div {
	width:150px;
	height:150px;
	background-color: #c75a5a;
	margin:10px;
}

2. Гибкий контейнер

Сначала ознакомьтесь со специфическими свойствами контейнера Flex и способами его использования.

Атрибуты стоимость имея в виду
flex-direction row || column || row-reverse || column-reverse Управляет ориентацией элементов Flex вдоль главной оси.
flex-wrap wrap || nowrap || wrap-reverse Контролирует, отображаются ли гибкие элементы на новой строке
flex-flow перенос строки|| перенос строки || перенос столбца || перенос столбца и т. д. Комбинированное сочетание свойства двух свойств Flex-Direction и Flex-Wrap
justify-content flex-start || flex-end || center || space-between || space-around Управляет выравниванием элементов Flex на главной оси.
align-items flex-start || flex-end || center || stretch || baseline Управление гибкими элементами вCross-AxisВыравнивание
align-content flex-start || flex-end || center || stretch Flex-контейнер для многострочного управления гибкими элементами вCross-AxisВыравнивание

1. flex-direction

flex-directionСвойство управляет ориентацией элементов Flex вдоль главной оси (Main Axis), которая может быть строкой (горизонтальной), столбцом (вертикально) или обратным расположением строки и столбца.

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

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

Конкретные примеры применения:

2. flex-wrap

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

Конкретные примеры применения:

вwrap-reverseУказывает, что гибкие элементы расположены в контейнере в несколько строк, но в обратном направлении.

3. flex-flow

flex-flowдаflex-directionа такжеflex-wrapСокращенное свойство для двух свойств.

Подробно объяснять не буду, просто посмотрите на следующий пример:

4. justify-content

justify-contentСвойство, которое управляет выравниванием элементов Flex по всей главной оси.

justify-contentЗначение свойства по умолчанию равноflex-start.

space-betweenВыровняйте концы гибких элементов.

space-aroundСделайте так, чтобы каждый гибкий элемент имел одинаковое пространство

5. align-items

align-itemsУправление гибкими элементами вCross-AxisВыравнивание.

align-itemsЗначение по умолчаниюstretch, сделайте все flex-элементы той же высоты, что и flex-контейнер, разложите.

baselineВыровняйте все гибкие элементы вдоль их собственной базовой линии на поперечной оси.

вstretchа такжеbaselineЕсли вы не установите конкретное значение высоты, оно будет вести себя, как указано выше, в противном случае будет отображаться фиксированная высота.

align-contentатрибут сalign-itemsЭффект тот же, но это свойство действует только для нескольких строк и не действует для одной строки.

3. Гибкий проект

Далее продолжайте знакомить с конкретными свойствами и использованием элементов Flex.

Атрибуты стоимость имея в виду
order Численная величина согласно сorderЗначения переупорядочены. Снизу к высоте.
flex-grow 0 || positive number Контролируйте, как гибкие элементы увеличиваются, когда в контейнере есть дополнительное пространство
flex-shrink 0 || positive number Как уменьшить гибкий элемент в контейнере без дополнительного места
flex-basis auto || % || em || rem || px Определяет начальный размер гибкого элемента
align-self auto || flex-start || flex-end || center || baseline || stretch Управление одним flex-элементом вCross-AxisВыравнивание

1. order

orderПозволяет переупорядочить элементы Flex в пределах гибкого контейнера. Значение по умолчанию это свойство равно 0.

в соответствии сorderЗначения отсортированы по размеру в порядке убывания значения.

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

При установке блока 1order:1После этого отсортируйте следующим образом:

Если несколько гибких элементов имеют одинаковыеorderЗначение, переупорядочивание элементов Flex зависит от расположения исходного HTML-файла.

Как показано ниже, установите для блока 1 и блока 2 значениеorder:1.

2. flex-grow и flex-shrink

flex-growа такжеflex-shrinkСвойство управляет тем, как flex-элемент растет (расширяется), когда в контейнере есть дополнительное пространство, и как он сжимается, когда лишнего места нет.

flex-growа такжеflex-shrinkЗначение может быть 0 или любым положительным числом больше 0.

по умолчанию,flex-growЗначение свойства установлено на0, указывающий, что flex-элемент не будет увеличиваться, заполняя доступное пространство в flex-контейнере.

по умолчанию,flex-shrinkЗначение свойства установлено равным 1, что означает, что гибкий элемент будет сжиматься по ширине экрана.

если поставитьflex-growЗначение установлено на1,Следующим образом:

Когда несколько flex-элементов находятся в одной строке, то есть без переноса, установите разныеflex-growа такжеflex-shrinkзначение, соответствующее распределение пространства также отличается.

flex-grow

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

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

flex-shrink

Сначала поместите все предметы в соответствии сflex-shrink * item-sizeСложите, чтобы получить взвешенную сумму, а затем рассчитайте коэффициент сжатия каждого элемента: коэффициент сжатия = flex-shrink * размер элемента / предыдущая сумма. Вычтите это из каждого элемента в концеshrink比例 * 负可用空间.

В элементе flex естьmin-width(height)а такжеmax-width(height), соответствующие элементы должны учитывать верхние и нижние предельные значения, а оставшееся значение растяжения распределять между другими элементами.

3. flex-basis

flex-basisУказывает начальный размер flex-элемента в направлении главной оси, который определяет ширину или высоту содержимого flex-элемента (в зависимости от направления главной оси).

По умолчанию начальная ширина гибкого элемента задается какflex-basisЗначение по умолчанию определяет, а именно:flex-basis: auto. Ширина элемента Flex рассчитывается автоматически на основе количества содержимого.

flex-basisа такжеwidth/heightЕсть определенный приоритет, конкретные правила таковы:

  • flex-basis имеет более высокий приоритет, чем ширина/высота не автоматически
  • Автоматический приоритет ширины/высоты равен flex-basis, в зависимости от того, что больше.

4. align-self

align-selfУправляет тем, как отдельные элементы выравниваются вдоль поперечной оси.

КромеautoКроме того, гибкий контейнер в приведенном выше примере установленalign-itmes：center.

autoзаключается в том, чтобы установить значение целевого гибкого элемента в родительский элементalign-itemsзначение или, если у элемента нет родительского элемента, установите значениеstretch. В приведенном выше примереalign-items：stretch.

4. Резюме

Вышеприведенное является общим введением в flexbox, демонстрирующим его мощь и гибкость. Кроме того, у flexbox есть много других особенностей и проблем, которые здесь не будут представлены.Рекомендуется прочитать следующие две статьи, которые хорошо написаны.Эта статья также в основном относится к этим двум статьям.

Понимание Flexbox: все, что вам нужно знать

Глубокое понимание гибкой верстки и расчетов

Если вы хотите попрактиковаться в мастерстве flexbox, вы можете попробовать поступить в Baidu Front-end Technology College.это задание.

Категории