Flex box direction column: Align items with multiple heights

Question

Please see the following example.

ul {
  display: flex;
}

li {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid green;
  justify-content: flex-start;
  align-items: center
}

ul, h3, h4, p {
  margin: 0;
  padding: 0;
  width: 100%;
}

h3 {
  margin-bottom: auto;
}

h4 {
  border-top: 1px solid green;
  margin-bottom: auto;
}

p {
  border-top: 1px solid green;
}

<ul>
  <li>
    <h3>h3<br>h3<br>h3</h3>
    <h4>h4</h4>
    <p>p</p>
  </li>
  <li>
    <h3>h3</h3>
    <h4>h4</h4>
    <p>p</p>
  </li>
  <li>
    <h3>h3</h3>
    <h4>h4</h4>
    <p>p<br>p</p>
  </li>
</ul>

I am using ul li html layout and apply flex-box style like that. The problem is that I have to fix this flex box, in which the top of each item aligns equally with each other. I tried to use margin-bottom: auto, but since the height varies, the layout is 'distorted'.

Could anyone please tell me what to do in this situation? Any other perspective / approach would be appreciated. My description is not good, so if there is anything unclear, just feel free to discuss with me. I really need your help.

Thanks in advance!

Update

This image is my expected result:

It's unclear what you're trying to do here... Maybe a grid is more what you're looking for? — jscul, Apr 26 '18 at 03:24
As far as I know you can't make that with flex without hardcoding heights. — Fecosos, Apr 26 '18 at 03:52
Grid seems to be the solution for my problem. But it's new to me so I need sometime to look into it first. Thank you for your suggestion. — Tyler Bean, Apr 26 '18 at 05:03
Because those `li` elements are seperated elements, you cannot compare its contents in height. You could do this another way, by creating list elements that are next to eachother. — Randy, Apr 26 '18 at 06:18
possible duplicate: [Equal height children of flex items](https://stackoverflow.com/q/36721216/3597276) — Michael Benjamin, Apr 26 '18 at 16:46

Randy · Answer 1 · 2018-04-26T06:22:04.197

You cannot do that with the HTML you provided, because the li elements are not communicating their content sizes to each other. Instead, you will need to seperate all of your content to take the advantage of automatically scaling the height.

To do so, you have to seperate your li elements more then you already have.

You can do that with flex, but you will need to change the HTML layout.

See the example below:

/* Flexbox */

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

li {
  width:33%;
}



/* Extra styles */

ul, h3, h4, p {
  margin: 0;
  padding: 0;
  width: 100%;
}

h3 {
  margin-bottom: auto;
}

h4 {
  border-top: 1px solid green;
  margin-bottom: auto;
}

p {
  border-top: 1px solid green;
}

<ul>
  <li>
    <h3>h3<br>h3<br>h3</h3>
  </li>
  <li>
    <h3>h3</h3>
  </li>
  <li>
    <h3>h3</h3>
  </li>
  <li>
    <h4>h4</h4>
  </li>
  <li>
    <h4>h4</h4>
  </li>
  <li>
    <h4>h4</h4>
  </li>
  <li>
    <p>p</p>
  </li>
  <li>
    <p>p</p>
  </li>
  <li>
    <p>p<br>p</p>
  </li>
</ul>

score 0 · Answer 2 · answered Apr 26 '18 at 06:25

I have changed the structure of the HTML and this will help you:

ul {
  display: flex;
  flex-flow: column nowrap;
  border: 1px solid green;
  border-collapse: collapse;
}

li {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -moz-flex-flow: row nowrap;
  flex-flow: row nowrap;
}

ul,
h3,
h4,
p {
  margin: 0;
  padding: 0;
  width: 100%;
}

h3,
h4,
p {
  flex-grow: 1;
  border: 1px solid green;
  box-sizing: border-box;
}

<ul>
  <li>
    <h3>h3<br>h3<br>h3</h3>
    <h3>h3</h3>
    <h3>h3</h3>
  </li>
  <li>
    <h4>h4</h4>
    <h4>h4</h4>
    <h4>h4</h4>
  </li>
  <li>
    <p>p</p>
    <p>p</p>
    <p>p<br>p</p>
  </li>
</ul>

Flex box direction column: Align items with multiple heights

2 Answers2