flex direction column reverse for top and bottom children-CodePudding

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 >
   <div >
      <button>2</button>
      <button>1</button>
   </div>
</div>

CodePudding user response：

You need to add flex-direction for the flexbox to align its elements vertically. By default, it arranges them horizontally. With column-reverse, the elements are arranged vertically in reverse order

.flex {
   display: flex;
   flex-direction: column-reverse;
}

button {
   width: 100%;
}

.wrap {
   width: 200px;
}

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

CodePudding user response：

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 >
  <div >
    <button>2</button>
    <button>1</button>
  </div>
</div>