CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



flex-direction

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.

row

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.

row-reverse

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.

column

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.

column-reverse

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.

References

Activity