6.1 flex-direction Property
Flexbox gives us some really neat tools for building responsive layouts. A key part of this system is the layout axes, which decide how Flex-items line up inside a Flex-container. Let's dig into the flex-direction and flex-wrap properties, which control the axis direction and how Flex-items behave when stuff overflows.
The flex-direction property sets the direction of the main axis, which is where Flex-items are gonna be laid out. This direction can be either horizontal or vertical, and in normal or reverse order.
Values:
row: main axis runs horizontally from left to right (default value)row-reverse: main axis runs horizontally from right to leftcolumn: main axis runs vertically from top to bottomcolumn-reverse: main axis runs vertically from bottom to top
Usage Example
1. Elements arranged horizontally:
.container-row {
display: flex;
flex-direction: row;
border: 2px solid #000;
padding: 10px;
}
.container-row-reverse {
display: flex;
flex-direction: row-reverse;
border: 2px solid #000;
padding: 10px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
<div class="container-row">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<div class="container-row-reverse">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
2. Elements arranged vertically:
.container-column {
display: flex;
flex-direction: column;
border: 2px solid #000;
padding: 10px;
}
.container-column-reverse {
display: flex;
flex-direction: column-reverse;
border: 2px solid #000;
padding: 10px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
<div class="container-column">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<div class="container-column-reverse">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
Code Explanation:
.container-row: items are arranged horizontally from left to right.container-row-reverse: items are arranged horizontally from right to left.container-column: items are arranged vertically from top to bottom.container-column-reverse: items are arranged vertically from bottom to top
6.2 flex-wrap Property
The flex-wrap property decides whether Flex-items wrap onto a new row/column if they don't fit in a single line. This comes in handy for creating responsive layouts where the container size can change based on device or screen.
Values
nowrap: items don't wrap and are placed in one line/column (default value)wrap: items wrap onto a new line/column as neededwrap-reverse: items wrap onto a new line/column in reverse order
Usage Examples
nowrap value:
Items don't wrap and stay in one line/column (default value).
.container-nowrap {
display: flex;
flex-wrap: nowrap;
border: 2px solid #000;
padding: 10px;
width: 300px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
width: 100px;
}
<div class="container-nowrap">
<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>
wrap value:
Items wrap onto a new line/column as needed.
.container-wrap {
display: flex;
flex-wrap: wrap;
border: 2px solid #000;
padding: 10px;
width: 300px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
width: 100px;
}
<div class="container-wrap">
<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>
wrap-reverse value:
Items wrap onto a new line/column in reverse order.
.container-wrap-reverse {
display: flex;
flex-wrap: wrap-reverse;
border: 2px solid #000;
padding: 10px;
width: 300px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
width: 100px;
}
<div class="container-wrap-reverse">
<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>
Code Explanation:
.container-nowrap: Flex-items stay in one line, even if they overflow the container.container-wrap: Flex-items wrap onto a new line if they don't fit in one line.container-wrap-reverse: Flex-items wrap onto a new line in reverse order
6.3 Using flex-direction and flex-wrap
You can combine the flex-direction and flex-wrap properties using the shorthand flex-flow. This property lets you set the axis direction and item wrap behavior at the same time.
Syntax:
.container {
flex-flow: [flex-direction] [flex-wrap];
}
Usage Example:
.container {
display: flex;
flex-flow: row wrap;
border: 2px solid #000;
padding: 10px;
width: 300px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
width: 100px;
}
<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>
Code Explanation:
-
.container: Flex-container using combinedflex-direction: row;andflex-wrap: wrap;, meaning items are laid out horizontally and wrap onto new lines as needed
GO TO FULL VERSION