Столбец направления Flex Box: выравнивание элементов с несколькими высотами

Question

Пожалуйста, смотрите следующий пример.

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>

Я использую ul li HTML-макет и применяю стиль flex-box таким образом.Проблема заключается в том, что я должен исправить эту гибкую коробку, в которой верх каждого элемента выравнивается одинаково друг с другом.Я пытался использовать margin-bottom: auto, но, поскольку высота меняется, макет «искажен».

Может кто-нибудь сказать, что делать в этой ситуации?Любая другая точка зрения / подход был бы оценен.Мое описание не очень хорошее, поэтому, если что-то неясно, просто не стесняйтесь обсуждать со мной.Мне очень нужна ваша помощь.

Заранее спасибо!

---

Обновление

Это изображение - мой ожидаемый результат:

Answer 1

Я изменил структуру HTML, и это поможет вам:

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>

Answer 2

Вы не можете сделать это с предоставленным вами HTML, потому что элементы li не сообщают друг другу свои размеры контента.Вместо этого вам нужно будет отделить весь ваш контент, чтобы воспользоваться автоматическим масштабированием высоты.

Для этого вам нужно отделить ваши элементы li больше, чем у вас уже есть.

Вы можете сделать это с помощью flex, но вам нужно будет изменить макет HTML.

См. Пример ниже:

/* 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>