Flexbox is a powerful layout tool in CSS that allows developers to create flexible and responsive layouts with ease. One of the key properties of Flexbox is flex-direction
, which determines the direction in which flex items are laid out within a flex container.
The flex-direction
property accepts four values: row
, row-reverse
, column
, and column-reverse
. Let's take a closer look at each of these values and how they affect the layout of flex items.
The default value of flex-direction
is row
, which means that flex items are laid out horizontally in a row. This is similar to the way that inline elements are laid out in HTML. Here's an example:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
flex-direction: row;
}
.item {
flex: 1;
}
In this example, we have a container with three items. The flex: 1;
property on the items ensures that they all take up an equal amount of space within the container. Because the flex-direction
is set to row
, the items are laid out horizontally in a row.
The row-reverse
value of flex-direction
is similar to row
, but it reverses the order in which the items are laid out. Here's an example:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
flex-direction: row-reverse;
}
.item {
flex: 1;
}
In this example, the items are still laid out horizontally in a row, but they are now in reverse order. The first item, "Item 1", is now on the right side of the container, while the last item, "Item 3", is on the left side.
The column
value of flex-direction
lays out flex items vertically in a column. Here's an example:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
flex-direction: column;
}
.item {
flex: 1;
}
In this example, the items are laid out vertically in a column. The flex: 1;
property ensures that they all take up an equal amount of space within the container.
The column-reverse
value of flex-direction
is similar to column
, but it reverses the order in which the items are laid out. Here's an example:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
flex-direction: column-reverse;
}
.item {
flex: 1;
}
In this example, the items are still laid out vertically in a column, but they are now in reverse order. The first item, "Item 1", is now at the bottom of the container, while the last item, "Item 3", is at the top.
By using the flex-direction
property, developers can easily create flexible and responsive layouts that adapt to different screen sizes and device orientations. Whether you need to lay out items horizontally or vertically, in a row or a column, Flexbox has you covered.