flex-wrap

Последнее обновление: 18.04.2017

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

  • nowrap: значение по умолчанию, которое определяет flex-контейнер, где все элементы раполагаются в одну строку (при расположении в виде строк) или один столбец (при расположении в столбик)

  • wrap: если элементы не помещаются во flex-контейнер, то создает дополнительные ряды в контейнере для размещения элементов. При расположении в виде строки содаются дополнительные строки, а при расположении в виде столбца добавляются дополнительные столбцы

  • wrap-reverse: то же самое, что и значение wrap, только элементы располагаются в обратном порядке

Например, возьмем значение по умолчанию nowrap:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			.flex-container {
				display: flex;
				border: solid 0.25em #000;
				width: 60%;
				height:8.25em;
				flex-wrap:nowrap;
			}
			.row {
				flex-direction: row;
			}
			.row-reverse {
				flex-direction: row-reverse;
			}
			.flex-item {
				text-align:center;
				font-size: 1em;
				padding: 1.5em;
				color: white;
				opacity: 0.8;
			}
			.color1 {background-color: #675BA7;}
			.color2 {background-color: #9BC850;}
			.color3 {background-color: #A62E5C;}
			.color4 {background-color: #2A9FBC;}
			.color5 {background-color: #F15B2A;}
        </style>
    </head>
    <body>
		<h3>Row</h3>
        <div class="flex-container row">
			<div class="flex-item color1">Flex Item 1</div>
			<div class="flex-item color2">Flex Item 2</div>
			<div class="flex-item color3">Flex Item 3</div>
			<div class="flex-item color4">Flex Item 4</div>
			<div class="flex-item color5">Flex Item 5</div>
		</div>
		
		<h3>Row-reverse</h3>
		<div class="flex-container row-reverse">
			<div class="flex-item color1">Flex Item 1</div>
			<div class="flex-item color2">Flex Item 2</div>
			<div class="flex-item color3">Flex Item 3</div>
			<div class="flex-item color4">Flex Item 4</div>
			<div class="flex-item color5">Flex Item 5</div>
		</div>
    </body>
</html>

Здесь в каждом из flex-контейнеров по пять элементов, однако ширина контейнера может вмещать не все элементы, тогда они уходят за границу контейнера:

flex-wrap nowrap в Flexbox и CSS3

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

.flex-container {
	display: flex;
	border: solid 0.25em #000;
	width: 60%;
	height:8.25em;
	
	flex-wrap:wrap;
}

В этом случае появится дополнительная стока:

flex-wrap в Flexbox и CSS3

При расположении в виде столбца контейнер будет создавать дополнительные столбцы:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			
			.flex-container {
				display: flex;
				border: solid 0.25em #000;
				width: 60%;
				height:8.3em;
				flex-wrap:wrap;
			}
			.column {
				flex-direction: column;
			}
			.column-reverse {
				flex-direction: column-reverse;
			}
			.flex-item {
				text-align:center;
				font-size: 1em;
				padding: 1.5em;
				color: white;
				opacity: 0.8;
			}
			.color1 {background-color: #675BA7;}
			.color2 {background-color: #9BC850;}
			.color3 {background-color: #A62E5C;}
			.color4 {background-color: #2A9FBC;}
			.color5 {background-color: #F15B2A;}
        </style>
    </head>
    <body>
		<h3>Column</h3>
        <div class="flex-container column">
			<div class="flex-item color1">Flex Item 1</div>
			<div class="flex-item color2">Flex Item 2</div>
			<div class="flex-item color3">Flex Item 3</div>
			<div class="flex-item color4">Flex Item 4</div>
			<div class="flex-item color5">Flex Item 5</div>
		</div>
		
		<h3>Column-reverse</h3>
		<div class="flex-container column-reverse">
			<div class="flex-item color1">Flex Item 1</div>
			<div class="flex-item color2">Flex Item 2</div>
			<div class="flex-item color3">Flex Item 3</div>
			<div class="flex-item color4">Flex Item 4</div>
			<div class="flex-item color5">Flex Item 5</div>
		</div>
    </body>
</html>
column flex-wrap в Flexbox и CSS3

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850