Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Codepen链接： http://codepen.io/korgmatose/pen/qqKzry?editors=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。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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>

这样的东西？

CSS Flexbox - 包装上不同高度的元素

2 个答案: