inline-flex elements are not aligned-CodePudding

Can someone explain to me, why the 2 <div> are not positioned at the same height? Or even better tell me, how to change it? It seems to have something to do with the column-flex inside, but i don't understand it.

<div style="background-color: red;padding: 5px;">
    <div style="display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 170px; background-color: green; margin: 10px;">
        <div style="width: 100px; height: 100px; background-color: white; border-radius: 50%;">
            <div style="display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; color: green; font-weight: bold; font-size: 8px;">
                <div style="width: 25px; height: 25px; border-radius: 50%; background-color: green; color: white; display: flex; font-size: 16px; flex-direction: column; align-items: center; justify-content: center;">5</div>
                &nbsp;/&nbsp;
                <p>
                    SOME<br>TEXT
                </p>
            </div>
        </div>
    </div>
    <div style="display: inline-flex;align-items: center;justify-content: center;width: 120px;height: 170px;background-color: green;margin: 10px;">
        <div style="width: 100px;height: 100px;background-color: white;border-radius: 50%;display: flex;justify-content: center;">
            <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;">
                <div style="display: flex;align-items: center;justify-content: space-between;color: green;font-weight: bold;font-size: 20px;">
                    <div style="width: 20px; height: 20px; border-radius: 50%; background-color: green; color: white; display: flex; font-size: 16px; flex-direction: column; align-items: center; justify-content: center;">4</div>
                    &nbsp;/
                    <img src="img1png" width="25px" height="25px">
                </div>
                <div style="display: flex; align-items: center; justify-content: space-between; color: green; font-weight: bold; font-size: 20px;">
                    <div style="width: 20px; height: 20px; border-radius: 50%; background-color: green; color: white; display: flex; font-size: 16px; flex-direction: column; align-items: center; justify-content: center;">-2</div>
                    &nbsp;/
                    <img src="img2.png" width="25px" height="25px">
                </div>
                <div style="display: flex; align-items: center; justify-content: space-between; color: green; font-weight: bold; font-size: 20px;">
                    <div style="width: 20px; height: 20px; border-radius: 50%; background-color: green; color: white; display: flex; font-size: 16px; flex-direction: column; align-items: center; justify-content: center;">-2</div>
                    &nbsp;/
                    <img src="img3.png" width="25px" height="25px">
                </div>
            </div>
        </div>
    </div>
</div>

edit: I should mention that i don't want to make the parent container a flex, because i need to add more divs like that and they should go into the next line when needed(depending on the screen size)

edit2: nevermind, i just discovered display:grid and together with grid-template-columns: repeat(auto-fit, 130px) this does exactly what i want

CodePudding user response：

Somehow the display: flex (2nd child of each 1st child div) is causing the alignment issue. In the example code, setting display: flex on the parent div fixes the issue.

<div style="background-color: red;padding: 5px;display: flex;">
    <div style="display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 170px; background-color: green; margin: 10px;">
        <div style="width: 100px; height: 100px; background-color: white; border-radius: 50%;">
            <div style="display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; color: green; font-weight: bold; font-size: 8px;">
                <div style="width: 25px; height: 25px; border-radius: 50%; background-color: green; color: white; display: flex; font-size: 16px; flex-direction: column; align-items: center; justify-content: center;">5</div>
                &nbsp;/&nbsp;
                <p>
                    SOME<br>TEXT
                </p>
            </div>
        </div>
    </div>
    <div style="display: inline-flex;align-items: center;justify-content: center;width: 120px;height: 170px;background-color: green;margin: 10px;">
        <div style="width: 100px;height: 100px;background-color: white;border-radius: 50%;display: flex;justify-content: center;">
            <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;">
                <div style="display: flex;align-items: center;justify-content: space-between;color: green;font-weight: bold;font-size: 20px;">
                    <div style="width: 20px; height: 20px; border-radius: 50%; background-color: green; color: white; display: flex; font-size: 16px; flex-direction: column; align-items: center; justify-content: center;">4</div>
                    &nbsp;/
                    <img src="img1png" width="25px" height="25px">
                </div>
                <div style="display: flex; align-items: center; justify-content: space-between; color: green; font-weight: bold; font-size: 20px;">
                    <div style="width: 20px; height: 20px; border-radius: 50%; background-color: green; color: white; display: flex; font-size: 16px; flex-direction: column; align-items: center; justify-content: center;">-2</div>
                    &nbsp;/
                    <img src="img2.png" width="25px" height="25px">
                </div>
                <div style="display: flex; align-items: center; justify-content: space-between; color: green; font-weight: bold; font-size: 20px;">
                    <div style="width: 20px; height: 20px; border-radius: 50%; background-color: green; color: white; display: flex; font-size: 16px; flex-direction: column; align-items: center; justify-content: center;">-2</div>
                    &nbsp;/
                    <img src="img3.png" width="25px" height="25px">
                </div>
            </div>
        </div>
    </div>
</div>

CodePudding user response：

ok, nevermind, i just discovered display:grid and together with grid-template-columns: repeat(auto-fit, 130px); this does exactly what i want

CodePudding user response：

Because you need display: flex; on the parent element. Inline-flex just means the elements themselves are flex containers, but in regard to their siblings (and to their container) they are treated as inline elements:

<div style="display: flex; background-color: red;padding: 5px;">
  <div style="display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 170px; background-color: green; margin: 10px;">
    <div style="width: 100px; height: 100px; background-color: white; border-radius: 50%;">
      <div style="display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; color: green; font-weight: bold; font-size: 8px;">
        <div style="width: 25px; height: 25px; border-radius: 50%; background-color: green; color: white; display: flex; font-size: 16px; flex-direction: column; align-items: center; justify-content: center;">5</div>
        &nbsp;/&nbsp;
        <p>
          SOME<br>TEXT
        </p>
      </div>
    </div>
  </div>
  <div style="display: inline-flex;align-items: center;justify-content: center;width: 120px;height: 170px;background-color: green;margin: 10px;">
    <div style="width: 100px;height: 100px;background-color: white;border-radius: 50%;display: flex;justify-content: center;">
      <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;">
        <div style="display: flex;align-items: center;justify-content: space-between;color: green;font-weight: bold;font-size: 20px;">
          <div style="width: 20px; height: 20px; border-radius: 50%; background-color: green; color: white; display: flex; font-size: 16px; flex-direction: column; align-items: center; justify-content: center;">4</div>
          &nbsp;/
          <img src="img1png" width="25px" height="25px">
        </div>
        <div style="display: flex; align-items: center; justify-content: space-between; color: green; font-weight: bold; font-size: 20px;">
          <div style="width: 20px; height: 20px; border-radius: 50%; background-color: green; color: white; display: flex; font-size: 16px; flex-direction: column; align-items: center; justify-content: center;">-2</div>
          &nbsp;/
          <img src="img2.png" width="25px" height="25px">
        </div>
        <div style="display: flex; align-items: center; justify-content: space-between; color: green; font-weight: bold; font-size: 20px;">
          <div style="width: 20px; height: 20px; border-radius: 50%; background-color: green; color: white; display: flex; font-size: 16px; flex-direction: column; align-items: center; justify-content: center;">-2</div>
          &nbsp;/
          <img src="img3.png" width="25px" height="25px">
        </div>
      </div>
    </div>
  </div>
</div>

Aternatively (instead of applying flex to the container), you can add vertical-align: top; to both or just the second of the inline-flex elements to affect their vertical position as inline-elements (by default they align at the baselines of their first text lines):

<div style="background-color: red;padding: 5px;">
  <div style="display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 170px; background-color: green; margin: 10px;">
    <div style="width: 100px; height: 100px; background-color: white; border-radius: 50%;">
      <div style="display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; color: green; font-weight: bold; font-size: 8px;">
        <div style="width: 25px; height: 25px; border-radius: 50%; background-color: green; color: white; display: flex; font-size: 16px; flex-direction: column; align-items: center; justify-content: center;">5</div>
        &nbsp;/&nbsp;
        <p>
          SOME<br>TEXT
        </p>
      </div>
    </div>
  </div>
  <div style="display: inline-flex; vertical-align: top;align-items: center;justify-content: center;width: 120px;height: 170px;background-color: green;margin: 10px;">
    <div style="width: 100px;height: 100px;background-color: white;border-radius: 50%;display: flex;justify-content: center;">
      <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;">
        <div style="display: flex;align-items: center;justify-content: space-between;color: green;font-weight: bold;font-size: 20px;">
          <div style="width: 20px; height: 20px; border-radius: 50%; background-color: green; color: white; display: flex; font-size: 16px; flex-direction: column; align-items: center; justify-content: center;">4</div>
          &nbsp;/
          <img src="img1png" width="25px" height="25px">
        </div>
        <div style="display: flex; align-items: center; justify-content: space-between; color: green; font-weight: bold; font-size: 20px;">
          <div style="width: 20px; height: 20px; border-radius: 50%; background-color: green; color: white; display: flex; font-size: 16px; flex-direction: column; align-items: center; justify-content: center;">-2</div>
          &nbsp;/
          <img src="img2.png" width="25px" height="25px">
        </div>
        <div style="display: flex; align-items: center; justify-content: space-between; color: green; font-weight: bold; font-size: 20px;">
          <div style="width: 20px; height: 20px; border-radius: 50%; background-color: green; color: white; display: flex; font-size: 16px; flex-direction: column; align-items: center; justify-content: center;">-2</div>
          &nbsp;/
          <img src="img3.png" width="25px" height="25px">
        </div>
      </div>
    </div>
  </div>
</div>