Flexbox Content Align

Question

Я изо всех сил пытался выровнять содержимое элементов флексбокса.

Как видите, три из нихравной высоты, но я хочу, чтобы все параграфы были выровнены / масштабированы с остальными.

.grid-chefs {
  display: flex;
  width: 100%;
  text-align: center;
  align-items: stretch;
}

.cfcol {
  width: 32%;
  line-height: 1.2;
}

.cfcol>img {
  max-width: 100%;
  max-height: 100px;
}

.cfcol>h3 {
  font-size: 22px;
}

<div class="grid-chefs">
  <div class="cfcol">
    <img src="img/chef.jpg" />
    <h3>John Doe</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="cfcol">
    <img src="img/chef.jpg" />
    <h3>John Smith</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="cfcol">
    <img src="img/chef.jpg" />
    <h3>John Smith Doe</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

Answer 1

CSS Flexbox не позволяет выравнивать элементы внутри отдельных родителей.Вы можете обойти это, используя новый макет CSS Grid с display: contents для столбцов, но поддержка браузера для последних все еще довольно далека от удовлетворительного.

На данный момент вам нужноиметь фиксированную высоту для ваших изображений и заголовков, если вы хотите выровнять свои абзацы совместимым с браузером образом.

.grid-chefs {
  display: grid;
  grid-auto-flow: column;
  width: 100%;
  text-align: center;
  align-items: stretch;
  grid-template-rows: auto auto auto;
}

.cfcol {
  width: 32%;
  line-height: 1.2;
  display: contents;
}

.cfcol>img {
  max-width: 100%;
  max-height: 100px;
}

.cfcol>h3 {
  font-size: 22px;
}

<div class="grid-chefs">
  <div class="cfcol">
    <img src="img/chef.jpg" />
    <h3>John Doe</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="cfcol">
    <img src="img/chef.jpg" />
    <h3>John Smith</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="cfcol">
    <img src="img/chef.jpg" />
    <h3>John Smith Doe</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

Answer 2

Как я уже говорил, вам нужно добавить минимальную высоту к вашим тегам h3

В противном случае рассмотрите возможность уменьшения размера шрифта ваших заголовков

Попробуйте это

        .grid-chefs {
        display: flex;
        width: 33%;
        text-align: center;
        align-items: center;
        justify-content: space-between;
        margin:auto;
    }

    .cfcol {
        width: 32%;
        line-height: 1.2;
    }

    .cfcol > img {
        max-width: 100%;
        max-height: 100px;
    }

    .cfcol > h3{
        font-size: 22px;
        min-height:75px;
        display:flex; 
        align-items: center;
    }

    <div class="grid-chefs">
            <div class="cfcol">
                <img src="img/chef.jpg" />
                <h3>John Doe</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="cfcol">
                <img src="img/chef.jpg" />
                <h3>John Smith</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="cfcol">
                <img src="img/chef.jpg" />
                <h3>John Smith Doe</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>

Также рабочий пример кода: https://codepen.io/anon/pen/VVqrYL