How can I display my buttons on their own line within a flexbox

Abow Published at Dev

Abow

I am trying to display the <h1> on it's own line as well as the <h3> and all the buttons on 1 line together. I am using flex and I know how to do this normally, what I tried to do was display: block; on the buttons and h3 to have them on their own lines, this didn't work and I tried googling my way and finding some kind of flexbox guide to figure it out myself.

body {
  margin: 0%;
  background-color: #6987D5;
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container h1 {}

.container button {
  border: 0px;
  background-color: #315dcc;
  padding: 1%;
  color: white;
}

<div class="container">
  <h1>Stopwatch</h1>
  <h3>00:00</h3>
  <button type="button">Start</button>
  <button type="button">Stop</button>
  <button type="button">Reset</button>
</div>

Carlotta

You have to add a <div> around the buttons to combine them.

body {
  margin: 0%;
  background-color: #6987D5;
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container h1 {}

.buttons {
  display: flex;
}

.container button {
  border: 0px;
  background-color: #315dcc;
  padding: 1%;
  color: white;
}

<div class="container">
  <h1>Stopwatch</h1>
  <h3>00:00</h3>
  <div class="buttons">
    <button type="button">Start</button>
    <button type="button">Stop</button>
    <button type="button">Reset</button>
  </div>
</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.