Свойства контейнера CSS Flex - Полное руководство - httpdoc.ru

Свойства контейнера Flexbox

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

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


CSS Display Flex

Чтобы начать использовать Flexbox, первое, что нужно добавить, - это свойство display:flex; в родительском контейнере. Сразу после добавления этого свойства ваш родительский контейнер станет гибким контейнером, а все его дочерние элементы станут гибкими элементами. Эти гибкие элементы по умолчанию выстраиваются в ряд.

Div являются блочными элементами уровня, поэтому они занимают все доступное горизонтальное пространство, и следующий div автоматически вставляется в новую строку. Но при использовании display:flex; Divs оставляют свое поведение по умолчанию и выравниваются один за другим по горизонтальной линии. Давайте посмотрим на пример ниже:

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Flex Box </title>	
  <meta charset="UTF-8">	
<style>
  .flex-container {
    display: flex;
    background-color: DodgerBlue;
	}
  .flex-item {
    background-color: #f1f1f1;
    margin: 10px;
    padding: 20px;
    font-size: 30px;
	}
</style>
</head>
 <body>
  <div class="flex-container">
   <div class="flex-item">A</div>
    <div class="flex-item">B</div>
     <div class="flex-item">C</div>  
  </div>

<p>Look how the display:flex; is getting used in parent container.</p>

</body>
</html>

Выход

А
B
C


Посмотрите, как дисплей: гибкий; используется в родительском контейнере.


CSS Flex Direction

После настройки контейнера как Flexbox браузер по умолчанию использует направление строк для flex-элементов, т.е. элементы размещаются слева направо. Но что, если мы хотим изменить направление?

Свойство CSS Flex direction позволяет отображать flex-элементы так, как мы хотим. Их можно выровнять в горизонтальном ряду, в вертикальном столбце, в обратном направлении строки или в обратном направлении столбца. Посмотрим на них по очереди:

  • flex-direction: ряд; - Это свойство по умолчанию. Он размещает flex-элементы слева направо в ряд.
  • flex-direction: столбец; - Он размещает гибкие элементы сверху вниз в столбце.
  • flex-direction: строка-реверс; - Он размещает элементы справа налево, а также меняет порядок гибких элементов. Первый элемент будет добавлен последним и наоборот.
  • flex-direction: обратный столбец; - Как следует из названия, элементы будут размещаться снизу вверх, а также в обратном порядке.

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

Пример
<!DOCTYPE html>
    <html>
    <head>
    <style>
    .flex-container1 {
      display: flex;
      flex-direction:row;
      background-color: DodgerBlue;
    }
    .flex-container2 {
      display: flex;
      flex-direction:column;
      background-color: red;
    }
    .flex-container3 {
      display: flex;
      flex-direction:row-reverse;
      background-color: tomato;
    }
    .flex-container4 {
      display: flex;
      flex-direction:column-reverse;
      background-color: green;
    }

    .flex-item {
      background-color: #f1f1f1;
      margin: 5px;
      padding: 10px;
      font-size: 15px;
          width:100px;
    }
    </style>
    </head>
    <body>
    <h2>Flex Direction Row</h2>
    <div class="flex-container1">
      <div class="flex-item">A</div>
      <div class="flex-item">B</div>
      <div class="flex-item">C</div>  
    </div>
    <h2>Flex Direction column</h2>
    <div class="flex-container2">
      <div class="flex-item">A</div>
      <div class="flex-item">B</div>
      <div class="flex-item">C</div>  
    </div>
    <h2>Flex Direction Row-reverse</h2>
    <div class="flex-container3">
      <div class="flex-item">A</div>
      <div class="flex-item">B</div>
      <div class="flex-item">C</div>  
    </div>
    <h2>Flex Direction Column-reverse</h2>
    <div class="flex-container4">
      <div class="flex-item">A</div>
      <div class="flex-item">B</div>
      <div class="flex-item">C</div>  
    </div>

    <p>Look how the display:flex; is getting used in parent container.</p>

    </body>
    </html>

Выход

Flex Direction Row

А
B
C

Столбец Flex Direction

А
B
C

Flex Direction Ряд-обратный

А
B
C

Столбец направления гибкости - обратный

А
B
C


Посмотрите, как дисплей: гибкий; используется в родительском контейнере.


CSS Flex Wrap

Flex Wrap - очень полезное свойство в случае переполнения содержимого. По умолчанию CSS Flexbox пытается уместить все элементы в одну строку, это может привести к переполнению содержимого за пределами flex-контейнера.

Свойство Flex Wrap автоматически помещает гибкие элементы в следующую строку, если они не помещаются в одну строку. Этому свойству можно присвоить три значения:

  • Flex-wrap: Обертка; - Активирует свойство Wrap. Теперь весь переполненный контент переместится в следующую строку и выйдет из контейнера.
  • Flex-wrap: Обертывание-реверс; - Он также обертывает контент, но все гибкие элементы будут упакованы в обратном порядке.
  • Flex-wrap: Nowrap; - Это значение по умолчанию, flex-элементы не переносятся.
Пример
<!DOCTYPE html>
<html>
<head>
  <style>
  .flex-container1 {
    display: flex;
    flex-wrap: nowrap;
    background-color: Tomato;
    height: auto;
  }
  
  .flex-container2 {
    display: flex;
    flex-wrap: wrap;
    background-color: Tomato;
    height: auto;
  }
  
  .flex-container3 {
    display: flex;
    flex-wrap: wrap-reverse;
    background-color: Tomato;
    height: auto;
  }
  
  .flex-items {
    background-color: #f1f1f1;
    padding: 10px 25px;
    text-align: center;
    height: 20px;
    width: 100px;
    margin: 5px;
  }
  </style>
</head>

<body>
  <h3>Flex-wrap: nowrap; </h3>
  <div class="flex-container1">
    <div class="flex-items">1</div>
    <div class="flex-items">2</div>
    <div class="flex-items">3</div>
    <div class="flex-items">4</div>
    <div class="flex-items">5</div>
    <div class="flex-items">6</div>
    <div class="flex-items">7</div>
    <div class="flex-items">8</div>
  </div>
  <h3>Flex-wrap: wrap;</h3>
  <div class="flex-container2">
    <div class="flex-items">1</div>
    <div class="flex-items">2</div>
    <div class="flex-items">3</div>
    <div class="flex-items">4</div>
    <div class="flex-items">5</div>
    <div class="flex-items">6</div>
    <div class="flex-items">7</div>
    <div class="flex-items">8</div>
  </div>
  <h3>Flex-wrap: wrap-reverse;</h3>
  <div class="flex-container3">
    <div class="flex-items">1</div>
    <div class="flex-items">2</div>
    <div class="flex-items">3</div>
    <div class="flex-items">4</div>
    <div class="flex-items">5</div>
    <div class="flex-items">6</div>
    <div class="flex-items">7</div>
    <div class="flex-items">8</div>
  </div>
</body>
</html>

Выход

Flex-wrap: nowrap;

1
2
3
4
5
6
7
8

Flex-wrap: пленка;

1
2
3
4
5
6
7
8

Flex-wrap: накрутка-реверс;

1
2
3
4
5
6
7
8

CSS Flex Flow (сокращенное свойство)

Свойство CSS Flex Flow является сокращенным свойством , в котором мы можем объединить как Flex-direction и Flex-Wrap свойство. Мы можем указать значения для обоих свойств, просто разделив их пробелом.

Синтаксис
< Flex-direction >  < Flex-wrap > ;
               Пример - Flex-flow: обертка колонки;

Возьмем лут на примере:

Пример
<!DOCTYPE html>
<html>
<head>
	<style>
	.flex-container {
		display: flex;
		flex-flow: row wrap;
		background-color: Tomato;
	}
	
	.flex-items {
		background-color: #f1f1f1;
		width: 100px;
		margin: 5px;
		text-align: center;
		height: 40px;
		font-size: 20px;
	}
	</style>
</head>

<body>
	<h2>Flex-flow</h2>
	<p>Notice how perfectly both flex-direction and flex-wrap are working.</p>
	<div class="flex-container">
		<div class="flex-items">1</div>
		<div class="flex-items">2</div>
		<div class="flex-items">3</div>
		<div class="flex-items">4</div>
		<div class="flex-items">5</div>
		<div class="flex-items">6</div>
	</div>
</body>
</html>

Выход

Гибкий поток

Обратите внимание, как идеально работают как flex-direction, так и flex-wrap.

1
2
3
4
5
6

Выравнивание содержимого строки в CSS Flexbox

Свойство Justify Content используется, когда вы хотите выровнять гибкие элементы, чтобы они отображались определенным образом вдоль строки (основная ось). Он выравнивает элемент по горизонтали, как указано. Это оправдывает наличие лишнего горизонтального пространства в ряду. Например, он может размещать элементы в начале, в конце или в центре, а также может управлять пространством вокруг гибких элементов.

Есть разные значения, которые вы можете установить для оправдания контента:

  • justify-content: гибкий старт; - Он размещает элементы гибкости в начале гибкости (вдоль главной оси), то есть в крайнем левом положении.
  • justify-content: гибкий конец; - Он размещает элементы гибкости в конце гибкости (вдоль главной оси), то есть в крайнем правом углу.
  • justify-content: center; - Просто поместите предметы в центр ряда. Это свойство вместе с align-items:center; очень полезно для центрирования содержимого в гибком контейнере.
  • justify-content: пробел между; - Это очень полезное свойство, когда в ряду остается немного свободного места. Он равномерно распределяет дополнительное пространство между элементами гибкости. Первый и последний элемент размещаются соответственно слева и справа, а затем пространство распределяется между ними. Посмотрите на пример, чтобы прояснить его концепцию.
  • justify-content: пространство вокруг; - Это свойство распределяет равное количество места как слева, так и справа от гибкого элемента.

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

Пример
<!DOCTYPE html>
<html>
<head>
	<style>
	.flex-container1 {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		background-color: DodgerBlue;
	}
	
	.flex-container2 {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		background-color: red;
	}
	
	.flex-container3 {
		display: flex;
		flex-direction: row;
		justify-content: center;
		background-color: tomato;
	}
	
	.flex-container4 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: green;
	}
	
	.flex-container5 {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		background-color: skyblue;
	}
	
	.flex-item {
		background-color: #f1f1f1;
		margin: 5px;
		padding: 10px;
		font-size: 15px;
		width: 100px;
	}
	</style>
</head>

<body>
	<h2>Justify-Content: Flex-start</h2>
	<div class="flex-container1">
		<div class="flex-item">A</div>
		<div class="flex-item">B</div>
		<div class="flex-item">C</div>
	</div>
	<h2>Justify-Content: Flex-end</h2>
	<div class="flex-container2">
		<div class="flex-item">A</div>
		<div class="flex-item">B</div>
		<div class="flex-item">C</div>
	</div>
	<h2>Justify-Content: Center</h2>
	<div class="flex-container3">
		<div class="flex-item">A</div>
		<div class="flex-item">B</div>
		<div class="flex-item">C</div>
	</div>
	<h2>Justify-Content: Space-between</h2>
	<div class="flex-container4">
		<div class="flex-item">A</div>
		<div class="flex-item">B</div>
		<div class="flex-item">C</div>
	</div>
	<h2>Justify-Content: Space-around</h2>
	<div class="flex-container5">
		<div class="flex-item">A</div>
		<div class="flex-item">B</div>
		<div class="flex-item">C</div>
	</div>
</body>
</html>

Выход

Justify-Content: Flex-start

А
B
C

Justify-Content: Flex-конец

А
B
C

Justify-Content: Center

А
B
C

Justify-Content: Пространство между

А
B
C

Justify-Content: Пространство вокруг

А
B
C

Примечание. Есть еще одно свойство justify-content: равномерно по пространству; попробуйте, а затем посмотрите на его эффект.

Выровнять элементы в CSS Flexbox

Выравнивание элементов позиционирует гибкие элементы в вертикальном пространстве (поперечная ось). Если вокруг гибких элементов остается некоторое пространство по вертикали, то это пространство можно выровнять с помощью свойства align-items. Он работает так же, как justify-content, но по поперечной оси.

Есть разные значения, которые вы можете установить для align-items:

  • выровнять элементы: гибкий старт; - Он размещает гибкие элементы в начале гибкости (поперечная ось, вертикально).
  • выровнять элементы: гибкий конец; - Он размещает элементы гибкости в конце гибкости, то есть в нижней части контейнера.
  • align-items: center; - Он выравнивает все элементы по центру поперечной оси.
  • align-items: baseline; - Это свойство выравнивает все элементы гибкости по их базовым линиям. Центральная точка всех гибких элементов будет на одной прямой. В примере это будет очищено.
  • align-items: stretch; - Это приведет к увеличению высоты всех гибких элементов, чтобы заполнить все доступное вертикальное пространство. Помните, что для stretch работы необходимо установить высоту flex-элементов auto .

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

Пример
<!DOCTYPE html>
<html>
<head>
	<style>
		.flex-container1 {
		display: flex;
		height: 100px;
		flex-direction: row;
		align-items: flex-start;
		background-color: DodgerBlue;
	}
	
	.flex-container2 {
		display: flex;
		flex-direction: row;
		background-color: red;
		height: 100px;
		align-items: flex-end;
	}
	
	.flex-container3 {
		display: flex;
		flex-direction: row;
		height: 100px;
		align-items: center;
		background-color: tomato;
	}
	
	.flex-container4 {
		display: flex;
		flex-direction: row;
		height: 100px;
		align-items: baseline;
		background-color: green;
	}
	
	.flex-container4 > div {
		background-color: #f1f1f1;
		width: 100px;
		margin: 10px;
		text-align: center;
	}
	
	.flex-container5 {
		display: flex;
		flex-direction: row;
		height: 100px;
		align-items: stretch;
		background-color: skyblue;
	}
	
	.flex-item {
		background-color: #f1f1f1;
		margin: 5px;
		padding: 15px;
		font-size: 20px;
		height: 25px;
	}
	</style>
</head>

<body>
	<h2>Align-items: Flex-start</h2>
	<div class="flex-container1">
		<div class="flex-item">A</div>
		<div class="flex-item">B</div>
		<div class="flex-item">C</div>
	</div>
	<h2>Align-items: Flex-end</h2>
	<div class="flex-container2">
		<div class="flex-item">A</div>
		<div class="flex-item">B</div>
		<div class="flex-item">C</div>
	</div>
	<h2>Align-items: Center</h2>
	<div class="flex-container3">
		<div class="flex-item">A</div>
		<div class="flex-item">B</div>
		<div class="flex-item">C</div>
	</div>
	<h2>Align-items: Baseline</h2>
	<div class="flex-container4">
		<div>
			<h1>A</h1></div>
		<div>
			<h4>B</h4></div>
		<div>
			<h2>C</h2></div>
	</div>
	<h2>Align-items: Stretch</h2>
	<div class="flex-container5">
		<div style="height:auto;" class="flex-item">A</div>
		<div style="height:auto;" class="flex-item">B</div>
		<div style="height:auto;" class="flex-item">C</div>
	</div>
</body>
</html>

Выход

Выравнивание элементов: Flex-start

А
B
C

Выравнивание элементов: Flex-end

А
B
C

Выровнять элементы: по центру

А
B
C

Выравнивание элементов: Базовая линия

А

B

C

Выравнивание предметов: Растянуть

А
B
C

Выравнивание содержимого столбца в CSS Flexbox

Align-content похож на justify-content, но работает по поперечной оси (вертикальной оси). Он выровняет элементы по вертикальной оси, если останется немного свободного места. Это немного отличается от предыдущих свойств, есть некоторые условия, которые должны быть выполнены, чтобы он работал:

  • Это свойство flex-flow должно быть установлено на wrap или wrap-reverse .
  • Строк должно быть несколько. Он не оказывает никакого влияния на одну строку.

Итак, из приведенных выше условий ясно, что это свойство будет работать только тогда, когда flex-flow:wrap/wrap-reverse будет задействовано, в противном случае - нет.

Есть разные значения, которые можно установить для align-content:

  • выровнять контент: гибкий старт; - Он размещает гибкие элементы в начале поперечной оси (вертикальной).
  • выровнять контент: гибкий конец; - выравнивает flex-элементы по концу поперечной оси, то есть внизу.
  • выровнять контент: центр; - Все предметы выравниваются по центру.
  • выровнять контент: пространство вокруг; - Это свойство будет распределять равное количество места как на верхней, так и на нижней стороне гибких элементов.
  • выровнять контент: пробел между; - Он равномерно распределяет дополнительное вертикальное пространство между элементами гибкости.
  • выровнять контент: растянуть; - Это свойство будет увеличивать высоту всех гибких элементов, чтобы заполнить дополнительное пространство внутри контейнера. Не забудьте использовать height:auto; это свойство для гибких элементов, чтобы показать эффект.

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

Пример
<!DOCTYPE html>
<html>
<head>
	<style>
	.flex-container1 {
		display: flex;
		flex-flow: wrap;
		align-content: flex-start;
		background-color: Tomato;
		height: 100px;
	}
	
	.flex-container2 {
		display: flex;
		flex-flow: wrap;
		align-content: flex-end;
		background-color: Tomato;
		height: 100px;
	}
	
	.flex-container3 {
		display: flex;
		flex-flow: wrap;
		align-content: center;
		background-color: Tomato;
		height: 100px;
	}
	
	.flex-container4 {
		display: flex;
		flex-flow: wrap;
		align-content: space-around;
		background-color: Tomato;
		height: 100px;
	}
	
	.flex-container5 {
		display: flex;
		flex-flow: wrap;
		align-content: space-between;
		background-color: Tomato;
		height: 100px;
	}
	
	.flex-container6 {
		display: flex;
		flex-flow: wrap;
		align-content: stretch;
		background-color: Tomato;
		height: 100px;
	}
	
	.flex-items {
		background-color: #f1f1f1;
		padding: 10px;
		text-align: center;
		line-height: 10px;
		width: 40px;
		margin: 2.5px;
	}
	</style>
</head>

<body>
	<h3>Align-content: Flex-start;</h3>
	<div class="flex-container1">
		<div class="flex-items">1</div>
		<div class="flex-items">2</div>
		<div class="flex-items">3</div>
		<div class="flex-items">4</div>
		<div class="flex-items">5</div>
		<div class="flex-items">6</div>
		<div class="flex-items">7</div>
		<div class="flex-items">8</div>
	</div>
	<h3>Align-content: Flex-end;</h3>
	<div class="flex-container2">
		<div class="flex-items">1</div>
		<div class="flex-items">2</div>
		<div class="flex-items">3</div>
		<div class="flex-items">4</div>
		<div class="flex-items">5</div>
		<div class="flex-items">6</div>
		<div class="flex-items">7</div>
		<div class="flex-items">8</div>
	</div>
	<h3>Align-content: Center;</h3>
	<div class="flex-container3">
		<div class="flex-items">1</div>
		<div class="flex-items">2</div>
		<div class="flex-items">3</div>
		<div class="flex-items">4</div>
		<div class="flex-items">5</div>
		<div class="flex-items">6</div>
		<div class="flex-items">7</div>
		<div class="flex-items">8</div>
	</div>
	<h3>Align-content: Space-around;</h3>
	<div class="flex-container4">
		<div class="flex-items">1</div>
		<div class="flex-items">2</div>
		<div class="flex-items">3</div>
		<div class="flex-items">4</div>
		<div class="flex-items">5</div>
		<div class="flex-items">6</div>
		<div class="flex-items">7</div>
		<div class="flex-items">8</div>
	</div>
	<h3>Align-content: Space-between;</h3>
	<div class="flex-container5">
		<div class="flex-items">1</div>
		<div class="flex-items">2</div>
		<div class="flex-items">3</div>
		<div class="flex-items">4</div>
		<div class="flex-items">5</div>
		<div class="flex-items">6</div>
		<div class="flex-items">7</div>
		<div class="flex-items">8</div>
	</div>
	<h3>Align-content: Stretch;</h3>
	<div class="flex-container6">
		<div class="flex-items">1</div>
		<div class="flex-items">2</div>
		<div class="flex-items">3</div>
		<div class="flex-items">4</div>
		<div class="flex-items">5</div>
		<div class="flex-items">6</div>
		<div class="flex-items">7</div>
		<div class="flex-items">8</div>
	</div>
</body>
</html>

Выход

Выравнивание содержимого: Flex-start;

1
2
3
4
5
6
7
8

Выравнивание содержимого: Flex-end;

1
2
3
4
5
6
7
8

Выровнять контент: по центру;

1
2
3
4
5
6
7
8

Выровнять содержание: Пространство вокруг;

1
2
3
4
5
6
7
8

Выровнять содержание: Пробел между;

1
2
3
4
5
6
7
8

Align-content: Stretch;

1
2
3
4
5
6
7
8

Примечание. Если Align-content используется в одной строке с активным свойством wrap , тогда свойства flex-start, flex-end, center и stretch будут работать, но пробелы между ними и пробелы вокруг не будут работать. Это то же самое, что и использование align-items , поэтому для отдельных строк никогда не используйте align-content , используйте align-items .

Это конец свойств гибкого контейнера. В следующем руководстве по flexbox мы рассмотрим еще несколько свойств, связанных с flex-элементами. Щелкните Далее.