CSS Flexbox: выровнять элемент Flex по разной ширине

Question

Я пытаюсь выровнять некоторые изгибаемые элементы с различной шириной.Я не могу ударить некоторые элементы.https://jsfiddle.net/sistel/m1vu9exf/2/

Я не могу выровнять тексты и цветные квадраты, как показано на этом рисунке http://www.farmacom.it/baseball.jpg

.flex-container-4 {
  display: flex;
  height: 70px;
  align-items: center;
  background-color: Black;
  justify-content: space-around;
  position:relative;
}

.flex-container-4 > div {
  background-color: BLACK;
  width: 500px;
  margin: 5px;
  text-align: center;
  line-height: 50px;
  font-size: 40px;
  color: white;
}

Answer 1

Я переписал ваш код с помощью flex css и удалил некоторые нежелательные стили.Надеюсь, что это поможет вашей проблеме

HTML

<div class="flex-container">

  <div class="flex-column">
    <div class="flex-row">
      <div class="number">18</div>
      <div class="number">18</div>
      <div class="number">18</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">18</div>
      <div class="number">18</div>
      <div class="number">18</div>
    </div>
    <div class="flex-row">
      <div class="text">BALL</div>
    </div>
    <div class="flex-row">
      <div class="green"></div>
      <div class="green"></div>
      <div class="green"></div>
    </div>
  </div>

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

  <div class="flex-column">
    <div class="flex-row">
      <div class="number">18</div>
      <div class="number">18</div>
      <div class="number">18</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">18</div>
      <div class="number">18</div>
      <div class="number">18</div>
    </div>
    <div class="flex-row">
      <div class="text">STRIKE</div>
    </div>
    <div class="flex-row">
      <div class="red"></div>
      <div class="red"></div>
    </div>
  </div>

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

  <div class="flex-column">
    <div class="flex-row">
      <div class="number">18</div>
      <div class="number">18</div>
      <div class="number">18</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">18</div>
      <div class="number">18</div>
      <div class="number">18</div>
    </div>
    <div class="flex-row">
      <div class="text">OUT</div>
    </div>
    <div class="flex-row">
      <div class="orange"></div>
      <div class="orange"></div>
    </div>
  </div>

</div>

CSS

.flex-container {
  display: flex;
  background-color: Black;
  justify-content: start;
  padding: 10px 10px;
  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: 5px;
  text-align: center;
  line-height: 50px;
  font-size: 40px;
  color: white;
}

.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;
}

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

JS Fiddle Link: https://jsfiddle.net/SJ_KIllshot/2ymefx81/

Answer 2

Чтобы получить точный результат, вам нужно изменить свой бит HTML-структуры.Если нет, то я создал похожий шаблон, используя ваш текущий код.пожалуйста, проверьте это:

Baseball Flex

Answer 3

Это потому, что вы создали строки, и ячейки из этих строк не знают о размерах других строк, поэтому в последней части «VIII» занимает большую ширину, чем другие элементы.

Одно решениезаключается в создании столбцов вместо строк, потому что таким образом гибкий контейнер будет иметь ширину самого широкого элемента.