flex-flow
The flex-flow property allows you to set values for both properties flex-direction and flex-wrap. It has the following formal syntax:
flex-flow: [flex-direction] [flex-wrap]
Moreover, the second property – flex-wrap can, in principle, be omitted, then the default value – will be used for it nowrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox In 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 property
The order property allows you to set a group for a flex item, allowing you to override its position within the flex container. The property takes the numerical order of the group as its value. Several elements can belong to one group.
For example, elements in group 0 appear before elements in group 1, elements in group 1 appear before elements in group 2, and so on.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox In 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>
In this case, 3 groups are defined. The first one displays the last element, since it has group -1:
By default, if the order property is not explicitly specified for elements, then it has a value of 0. And the second and third elements are displayed last in this case, since their order property is 1.