html - 带有很多文本的 flexbox 行的位置很奇怪

Question

我有一个像这样的 4 格网格

<div class="flex-row">
    <div id="img1">...</div>
    <div id="img3">...</div>
</div>
<div class="flex-row">
    <div>...</div>
    <div id="textdiv">...</div>
</div>

.flex-row div 是 flexbox 行。我的问题是当里面有很长的文本时，#textdiv 完全没有对齐。

有人能告诉我 #textdiv 有什么问题吗？为什么它不能正确地在 flex 中安顿下来？

我创建了一支显示错误的笔 http://codepen.io/deiga/pen/Axkwg

Answer 1

看起来你只需要设置 align-items到 flex-start ( demo ):

#grid > .flex-row {
  flex-direction: column;
  -webkit-box-pack: flex-start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  font-size: 1.25em; /* 20/16 px */
  line-height: 1.7;
  -webkit-align-items:flex-start; /* <!-- Add this for older webkit support */
  align-items:flex-start; /* <-- Add this */
}

默认情况下，align-items 设置为 baseline，这就是为什么您的段落第一行底部与图像底部对齐的原因第一列。