Flexbox内容对齐

Question

我一直在努力使flexbox项中的内容均匀对齐。

如您所见，它们三个高度相等，但是我要实现的是使所有段落与其他段落对齐/缩放。

.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

正如我评论的那样，您必须在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>

还有一个有效的Codepen示例：https://codepen.io/anon/pen/VVqrYL

Answer 2

CSS Flexbox不允许您在单独的父项中对齐项目。您可以通过使用新的CSS网格布局来解决此问题，其中display: contents用于列，但是browser support仍然不能令人满意。

现在，如果要以与浏览器兼容的方式对齐段落，则需要将图像和标题的高度固定。

.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>