CSS Flexbox - 换行元素的不同高度

Question

我有一个简单的布局，其中包含不同大小的元素，我正试图将它们组合在一起用于仪表板。

div {
  padding: 5px 5px 5px 5px;
  margin: 1px 1px 1px 1px;
  display: flex;
}
div.first {
  border: 1px dotted lightpink;
}
div.second {
  border: 1px dotted orange;
}
div.third {
  border: 1px dotted green;
}
div.fourth {
  border: 1px dotted fuchsia;
}

<div style="display: flex; height: 500px">
  <div class="first" style="flex: 0 60%;flex-wrap: wrap;align-items;stretch;align-content:stretch">
    <div class="first" style="flex: 1 100%; align-self: flex-start">
      Title text
    </div>
    <div class="second" style="flex: 2 auto">
      Content A
    </div>
    <div class="third" style="flex: 1 auto">
      Content B
    </div>
    <div class="fourth" style="flex: 1 auto">
      <div style="height: 66px; align-self:flex-end">
        <div style="align-self: flex-end">
          Content C
        </div>
      </div>
    </div>
  </div>
  <div class="second" style="flex: 1 auto; align-items: flex-end">
    Content D
  </div>
</div>

Codepen link: http://codepen.io/korgmatose/pen/qqKzry?editors=1100

我想填充第二行（内容 A、B、C），使其从标题文本下方开始。

但是制作 align-items flex-start 将不允许第二行填充剩余的 space，并且对该行中的一项设置 height to 100% 只会将高度设置为parent 容器，从而使 div 位于底部边框之外。

Answer 1

div {
  padding: 5px 5px 5px 5px;
  margin: 1px 1px 1px 1px;
  display: flex;
}
div.first {
  border: 1px dotted lightpink;
}
div.second {
  border: 1px dotted orange;
}
div.third {
  border: 1px dotted green;
}
div.fourth {
  border: 1px dotted fuchsia;
}

<div style="display: flex;">
  <div class="first" style="flex: 0 60%;flex-wrap: wrap;align-items;stretch;align-content:stretch">
    <div class="first" style="flex: 1 100%; align-self: flex-start">
      Title text
    </div>
    <div class="second" style="flex: 2 auto">
      Content A
    </div>
    <div class="third" style="flex: 1 auto">
      Content B
    </div>
    <div class="fourth" style="flex: 1 auto">
      <div style="height: 66px; align-self:flex-end">
        <div style="align-self: flex-end">
          Content C
        </div>
      </div>
    </div>
  </div>
  <div class="second" style="flex: 1 auto; align-items: flex-end">
    Content D
  </div>
</div>

是这样的吗？

Answer 2

就像@kukkuz 说的那样，我也建议这样做。只需将内容 A、B、C 放在单独的容器中，在本例中为 #content 并向其添加 display: flex、flex-direction: column 和 flex: 1，请不要使用内联样式来为您的 HTML 设置样式，因为它会使您的代码变得不那么可读。最推荐的方法是将您的 CSS 代码放入一个单独的文件中，然后 link 将其放入您的 HTML.

以下代码示例说明了如何在没有任何内联样式的情况下对所需布局进行标记。

HTML

<div id="wrapper">
  <div class="left">
    <div class="title">Title text</div>
    <div id="content">
      <div class="second">Content A</div>
      <div class="third">Content B</div>
      <div class="fourth">Content C</div>
    </div>
  </div>
  <div class="right">Content D</div>
</div>

CSS

div {
  padding: 5px 5px 5px 5px;
  margin: 1px 1px 1px 1px;
}

#wrapper {
  display: flex;
  height: 500px;
}

.left {
  flex: 3;
  display: flex;
  flex-direction: column;
}

#content{
  flex: 1;
  display: flex;
  padding: 0;
}

.second,
.third,
.fourth {
  flex: 1;
}

.third {
  border: 1px dotted green;
}

.fourth {
  display: flex;
  align-items: flex-end;
  border: 1px dotted fuchsia;
}

.right {
  flex: 2;
}

.left,
.title {
  border: 1px dotted lightpink;
}

.right,
.second {
  border: 1px dotted orange;
}

div {
  padding: 5px 5px 5px 5px;
  margin: 1px 1px 1px 1px;
}
#wrapper {
  display: flex;
  height: 500px;
}
.left {
  flex: 3;
  display: flex;
  flex-direction: column;
}
#content {
  flex: 1;
  display: flex;
  padding: 0;
}
.second,
.third,
.fourth {
  flex: 1;
}
.third {
  border: 1px dotted green;
}
.fourth {
  display: flex;
  align-items: flex-end;
  border: 1px dotted fuchsia;
}
.right {
  flex: 2;
}
.left,
.title {
  border: 1px dotted lightpink;
}
.right,
.second {
  border: 1px dotted orange;
}

<div id="wrapper">
  <div class="left">
    <div class="title">Title text</div>
    <div id="content">
      <div class="second">Content A</div>
      <div class="third">Content B</div>
      <div class="fourth">Content C</div>
    </div>
  </div>
  <div class="right">Content D</div>
</div>

CSS Flexbox - 换行元素的不同高度

CSS Flexbox - varying height of elements on wrap

css

positioning

stretch

fill

flexbox