flex-direction

Controls how the child elements are arranged along the main axis:

row (default): Places elements from left to right.
row-reverse: Places elements from right to left.
column: Places elements from top to bottom.
column-reverse: Places elements from bottom to top.

Example

With this dynamic example you can see the different arrangements of the child elements by modifying the flex-direction property in the selector.

Select flex-direction:

rowrow-reversecolumncolumn-reverse

ResultLiveContainer width100%

html

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  flex-direction: row;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  flex-direction: row;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

Edit the code or use the selectors: the result updates instantly.