-1

I need to put button under button, with display flex. When I remove display: flex the button goes up the page, but when I use display: flex the buttons are centered but they are side by side.

#wrapper {
  width: 100%;
  height: 400px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  height: 20px;
  width: 100px;
}
<div id="wrapper">
  <button type="button">hello</button>
  <button type="button">hello</button>
</div>

Picture description

kukkuz
  • 41,512
  • 6
  • 59
  • 95
Jacoup
  • 7
  • 4
  • This site is pretty good to get into flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Matt.S Mar 11 '19 at 14:08
  • @TemaniAfif It's not obvious to me that either of those duplicates has anything to do with the question asked here. The asker is asking how to stack children in a flex container vertically instead of horizontally. Neither "duplicate" answers that. However, since the first paragraph of the question is kind of difficult to parse, confusion is probably inevitable; I won't vote to reopen because it's unclear as it stands. – Mark Amery Mar 11 '19 at 15:14
  • @MarkAmery both duplicates are canonical duplicates dealing with all the flexbox alignment issue either column or row. For me the question lack research as any basic Flexbox tutorial will teach you the column direction and those question contain the need information for the OP to understand all the feature of flexbox. They cover more than the question so they are more than a duplicate. (we can still add more duplicates but the two I added should be enough) – Temani Afif Mar 11 '19 at 15:18
  • @MarkAmery here is the answer from the first duplicate describing perfectly this use case: https://stackoverflow.com/a/33049198/8620333 – Temani Afif Mar 11 '19 at 15:19

1 Answers1

1

You can use flex-direction: column. This will stack the flex items vertically (from top to bottom)

#wrapper {
  width: 100%;
  height: 400px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

button {
  height: 20px;
  width: 100px;
}
<div id="wrapper">
  <button type="button">hello</button>
  <button type="button">hello</button>
</div>
Mamun
  • 66,969
  • 9
  • 47
  • 59