CSS flex-flow property
The flex-flow property in CSS is a shorthand for the flex-direction and flex-wrap properties. It provides a convenient way to specify both the direction of flex items and whether they should wrap onto multiple lines in a single declaration.
Basic Syntax
selector {
flex-flow: <flex-direction> <flex-wrap>;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-flow: row wrap; /* Shorthand for flex-direction and flex-wrap */
}
.item {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightcoral;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>
</body>
</html>
In this example, flex-flow: row wrap; sets the flex direction to row and enables wrapping of items.
Values for flex-flow
The flex-flow property combines two values:
1. flex-direction
The first value specifies the flex direction. It determines the direction of the main axis and affects how items are laid out in the container. Possible values include:
row: Items are laid out horizontally from left to right.row-reverse: Items are laid out horizontally from right to left.column: Items are laid out vertically from top to bottom.column-reverse: Items are laid out vertically from bottom to top.
2. flex-wrap
The second value specifies the flex wrap behavior. It determines whether flex items should wrap onto multiple lines or stay on a single line. Possible values include:
nowrap: Flex items are placed on a single line. They do not wrap.wrap: Flex items wrap onto multiple lines if necessary.wrap-reverse: Flex items wrap onto multiple lines in reverse order.
Example Usage
Example 1: Horizontal Layout with Wrapping
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-flow: row wrap;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightblue;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>
</body>
</html>
Here, flex-flow: row wrap; arranges items in a horizontal row and wraps them onto new lines if they overflow the container.
Example 2: Vertical Layout with No Wrapping
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-flow: column nowrap;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightgreen;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>
</body>
</html>
In this example, flex-flow: column nowrap; arranges items in a vertical column without wrapping.
Example 3: Horizontal Layout with Reversed Wrapping
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-flow: row wrap-reverse;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightcoral;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>
</body>
</html>
Here, flex-flow: row wrap-reverse; arranges items horizontally and wraps them onto new lines in reverse order.