Flex box align

by SJ_KIllshot

HTML

<div class="container">

  <div class="row" id="result">
    <div class="flex-container">

      <div class="flex-column">
        <div class="flex-row">
          <div class="number" id="n01">01</div>
          <div class="number" id="n02">02</div>
          <div class="number" id="n03">03</div>
        </div>
        <div class="flex-row">
          <div class="roman-numeric">I</div>
          <div class="roman-numeric">II</div>
          <div class="roman-numeric">III</div>
        </div>
        <div class="flex-row">
          <div class="number" id="n11">11</div>
          <div class="number" id="n12">12</div>
          <div class="number" id="n13">13</div>
        </div>
      </div>

      <div class="seperator"></div>

      <div class="flex-column">
        <div class="flex-row">
          <div class="number" id="n04">04</div>
          <div class="number" id="n05">05</div>
          <div class="number" id="n06">06</div>
        </div>
        <div class="flex-row">
          <div class="roman-numeric">IV</div>
          <div class="roman-numeric">V</div>
          <div class="roman-numeric">VI</div>
        </div>
        <div class="flex-row">
          <div class="number" id="n14">14</div>
          <div class="number" id="n15">15</div>
          <div class="number" id="n16">16</div>
        </div>
      </div>

      <div class="seperator"></div>

      <div class="flex-column">
        <div class="flex-row">
          <div class="number" id="n07">07</div>
          <div class="number" id="n08">08</div>
          <div class="number" id="n09">09</div>
        </div>
        <div class="flex-row">
          <div class="roman-numeric">VII</div>
          <div class="roman-numeric">VIII</div>
          <div class="roman-numeric">IX</div>
        </div>
        <div class="flex-row">
          <div class="number" id="n17">17</div>
          <div class="number" id="n18">18</div>
          <div class="number" id="n19">19</div>
        </div>
      </div>

...

CSS

/* ANTEPRIMA */

.flex-container {
  display: flex;
  background-color: Black;
  justify-content: start;
  padding: 0px 10px;
  width: fit-content;
}

.flex-container2 {
  display: flex;
  background-color: Black;
  justify-content: start;
  padding: 0px 20px;
  width: fit-content;
}

.flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.flex-row>.number {
  background-color: #444;
  width: 100px;
  margin: 5px;
  text-align: center;
  line-height: 75px;
  font-size: 60px;
  color: yellow;
}

.flex-row>.roman-numeric {
  width: 100px;
  margin: 5px;
  text-align: center;
  line-height: 45px;
  font-size: 50px;
  color: white;
}

.flex-row>.text {
  background-color: BLACK;
  margin-top: 25px;
  text-align: center;
  line-height: 50px;
  font-size: 40px;
  color: white;
}

.flex-row>.blank {
  width: 100px;
  margin: 5px;
  text-align: center;
  height: 50px;
}

.green {
  background-color: green;
  width: 40px;
  height: 40px;
  margin: 25px;
}

.red {
  background-color: red;
  width: 40px;
  height: 40px;
  margin: 25px;
}

.orange {
  background-color: orange;
  width: 40px;
  height: 40px;
  margin: 25px;
}

.gray {
  background-color: #444;
  width: 40px;
  height: 40px;
  margin: 25px;
}

.seperator {
  background: #a5a2a2;
  width: 10px;
  margin: 0px 15px;
}

.container {
  width: fit-content;
  background: black;
}

.ball-col {
    width: 320px;
}

.strike-col {
    width: 330px;
}

.out-col {
   width: 330px;
}

.single-col {
  width: 180px;
}