Question

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

<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的事情是什么？为什么它没有正确地在弹性体中稳定下来？

我创建了一支显示错误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，因此段落第一行的底部与第一列中图像的底部对齐。

具有大量文本的flexbox行具有奇怪的定位

1 个答案: