Flex Direction CSS Properties
The flex-direction property determines the ordering direction of the elements inside the flexbox flex box structure. Items are normally lined up in the main-axis direction. According to the main-axis flex-direction feature, it is located in the horizontal position or vertically in the block-axis position.
You can examine the concepts of Main-axis and Cross-axis. The direction of the main-axis affects the flow direction of the flexbox content. Alignment features that affect the principal-axis and cross-axis are also available.
Flex-direction Takes 4 Values
flex-direction: row; It is the default value.
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
The following examples will work according to this html.
<div class="flex-container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item">3</div>
<div class="item item4">4</div>
<div class="item">5</div>
</div>
1 flex-direction:row (Default)
Here the main-axis (main axis) is in the direction of horizontal writing. With the row value, the items are sorted in the writing direction, starting from the left end of the flex box to the right.
.container{ flex-direction: row; }
Example of flex-direction: row
*::before, *::after{
box-sizing: border-box;
}
.flex-container{
display: flex;
flex-direction: row;
padding: 15px;
border: 1px solid #e2e2e2;
}
As you can see in the example below, the items are arranged from left to right in the direction of writing. flex-direction:row; You don't need to specify it as it is the default value.
2. flex-direction:row-reverse
At this value, the main-axis is the opposite of the horizontal writing direction. With the row-reverse value, the items are sorted in the opposite direction of writing, starting from the right end of the flex box.
.container{ flex-direction: row-reverse; }
Tips: row | In row-reverse values, the main-axis direction is horizontal typing direction and vice versa. The cross-axis direction will be in the direction of the block-axis. Note that the direction of the main-axis changes with the value of flex-direction. The main-axis and cros-axis concepts define how the flow direction and flexbox features work.
flex-direction: row-reverse Example
*::before, *::after{
box-sizing: border-box;
}
.flex-container{
display: flex;
flex-direction: row-reverse;
padding: 15px;
border: 1px solid #e2e2e2;
}
As you can see in the example below, the items started in the opposite direction of writing. At the same time, the items began to be lined up from the end of the flex box.
3. flex-direction:column (Varsayılan)
Bu değerde main-axis (ana eksen) dikeyde blok-ekseni yönündedir.
.container{ flex-direction: column; }
Example of flex-direction: column
.flex-container{
display: flex;
flex-direction: column;
padding: 15px;
border: 1px solid #e2e2e2;
}
In the flex-direction:column property, the main-axis of the flexbox is the block-axis. Items are sorted one below the other within the block-axis. The column value is aligned starting from the top end of the flex box.
4. flex-direction:column-reverse
At this value, the main-axis is vertically opposite the block-axis direction.
.container{ flex-direction: column-reverse; }
Example of flex-direction: column-reverse
.flex-container{
display: flex;
flex-direction: column-reverse;
padding: 15px;
border: 1px solid #e2e2e2;
}
In the flex-direction:column-reverse property, the main-axis of the flexbox is the block-axis. In the column-reverse value, the flex is aligned starting from the bottom end of the box.