I'm trying to align some flex items with different widths. I can not hit some elements. https://jsfiddle.net/sistel/m1vu9exf/2/

I cannot align the texts and colored squares as shown in this figure 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;
}

3 Answers

0
Stefan Joseph On Best Solutions

I have re-written your code using flex css and removed some unwanted styles. Hope this helps your problem

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/

0
TheOpti On

This is because you created rows and cells from these rows doesn't know about other rows' dimensions - this is why in the last part, "VIII" takes more width than other elements.

One solution is to create columns instead of rows, because in this way, flex container will be of the width of the widest element.

0
Amarjit Singh On

To get exact result you need to change your bit of html structure. If not i have created similar pattern using your current code. please check this:

Baseball Flex