flex-flow. Порядок элементов

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

flex-flow

Свойство flex-flow позволяет установить значения сразу для обоих свойств flex-direction и flex-wrap. Оно имеет следующий формальный синтаксис:

flex-flow: [flex-direction] [flex-wrap]

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			
			.flex-container {
				display: flex;
				border: solid 0.25em #000;
				height:8.25em;
				flex-flow: row wrap;
			}
			.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>
		<div class="flex-container">
			<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>

Свойство order

Свойство order позволяет установить группу для flex-элемента, позволяя тем самым переопределить его позицию внутри flex-контейнера. В качестве значения свойство принимает числовой порядок группы. К одной группе может принадлежать несколько элементов.

Например, элементы в группе 0 располагаются перед элементами с группой 1, а элементы с группой 1 располагаются перед элементами с группой 2 и так далее.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Flexbox в CSS3</title>
        <style>
			
			.flex-container {
				display: flex;
				flex-flow: row wrap;
			}
			.flex-item {
				text-align:center;
				font-size: 1em;
				padding: 1.5em;
				color: white;
				opacity: 0.8;
			}
			.group1{
				order:-1;
			}
			.group2{
				order:1;
			}
			.color1 {background-color: #675BA7;}
			.color2 {background-color: #9BC850;}
			.color3 {background-color: #A62E5C;}
			.color4 {background-color: #2A9FBC;}
			.color5 {background-color: #F15B2A;}
        </style>
    </head>
    <body>
		<div class="flex-container">
			<div class="flex-item color1">Flex Item 1</div>
			<div class="flex-item color2 group2">Flex Item 2</div>
			<div class="flex-item color3 group2">Flex Item 3</div>
			<div class="flex-item color4">Flex Item 4</div>
			<div class="flex-item color5 group1">Flex Item 5</div>
		</div>
</html>

В данном случае определены 3 группы. Первый отображается последний элемент, так как он имеет группу -1:

order и flex-flow в Flexbox и CSS3

По умолчанию если у элементов явным образом не указано свойство order, то оно имеет значение 0. И последними в данном случае отображаются второй и третий элемент, так как у них свойство order равно 1.

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

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