flex direction column reverse for top and bottom children

Question

I try to make this layout using flex-direction: column-reverse where button 1 and button 2 order is swapped without changing the html:

<button>2</button>
<button>1</button>

but I can't apply flex because it became 1 liner.

.flex {
   display: flex;
}

button {
   width: 100%;
}

.wrap {
   width: 200px;
}

<div class="wrap">
   <div class="flex">
      <button>2</button>
      <button>1</button>
   </div>
</div>

Answer 1

A default setting in a flex container is flex-direction: row, which means that items will line up in a row.

If you want the items to stack vertically (in a column) then add flex-direction: column or column-reverse to the container.

.flex {
  display: flex;
  flex-direction: column-reverse; /* new */
}

button {
  width: 100%;
}

.wrap {
  width: 200px;
}

<div class="wrap">
  <div class="flex">
    <button>2</button>
    <button>1</button>
  </div>
</div>