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链接:http://codepen.io/korgmatose/pen/qqKzry？edit = 1100

我想填充第二行(内容A,B,C),以便它在标题文本下面开始.

但是制作align-items flex-start将不允许第二行填充剩余空间,并且设置height to 100%该行中的一个项目仅将高度设置为父容器,从而将div放在底部边界之外.

Answer 1

就像@kukkuz 说的，我也建议这样做。只需将内容 A、B、C 放入单独的容器中，在本例中#content并添加display: flex,flex-direction: column和flex: 1到其中，请不要使用内联样式来设置 HTML 样式，因为它会使您的代码可读性降低。最推荐的方法是将 CSS 代码放入单独的文件中并将其链接到 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 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>

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;
}