html - 具有 50% 列拉伸(stretch)的 CSS Flex 行方向

Question

我正在尝试学习 CSS flex 的工作原理。我想用一些 block (元素)创建一个全宽和全高的面板。我不明白如何在 flex-direction 为行(图像上的粉色和黄色 block )时创建 2 个高度分别为 50% 的垂直元素。

这是我的目标:

这是我现在得到的:

这是我的代码:

 body {
      min-height: 100vh;
    }

    .container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      padding: 5px;
    }

    .container .item
    {    
       margin: 10px;
    }

    .item.blue {
      flex: 0 1 80%;
      background: blue;
    }

    .item.green {
      flex: 0 1 auto;
      background: green;
    }

    .item.red {
        flex: 0 1 60%;
        background: red;
    }

    .item.pink {
      flex: 1 0 auto;
      background: pink;
      align-self: stretch;
    }

    .item.orange{
      flex: 0 1 60%;
      background: orange;
    }

    .item.yellow {
      flex: 1 0 auto;
      align-self: center;
      background: yellow;
    }

    .item.purple{
      flex: 1 0 auto;
      background: purple;
    }

  <div class="container">
    <div class="item blue">
        blue
    </div>
    <div class="item green">
        green
    </div>
    <div class="item red">
        red
    </div>
    <div class="item pink">
        pink
    </div>
    <div class="item orange">
        orange
    </div>
    <div class="item yellow">
        yellow
    </div>
    <div class="item purple">
        purple
    </div>
  </div>

Answer 1

您可以添加额外的行和列包装器，而不是尝试用一个长的、环绕的、 flex 的行来完成所有这些，并且仍然使用 flex 的好处。这样您就不会偶尔使用自对齐属性或可能难以维护的东西，并且 html 在语义上更类似于布局。

.row {
  display: flex;
  flex-direction: row;
}

.column {
  min-height: 100px;
  flex: 0 1 50%;
  display: flex;
  flex-direction: column;
}

.column:nth-of-type(1) {
  flex: 0 1 60%;
}

.column:nth-of-type(2) {
  flex: 1 1 auto;
}

.item {
  min-height: 30px;
  border-radius: 5px;
  margin: 5px;
}

.item.blue {
  flex: 0 1 80%;
  background: blue;
}

.item.green {
  flex: 1 1 auto;
  background: green;
}

.item.red {
  flex: 0 1 20%;
  background: red;
}

.item.orange {
  flex: 1 0 auto;
  background: orange;
}

.item.pink {
  flex: 1 0 auto;
  background: pink;
}

.item.yellow {
  flex: 1 0 auto;
  background: yellow;
}

.item.purple {
  flex: 1 0 auto;
  background: purple;
}

<div class="row">
  <div class="item blue">
    blue
  </div>
  <div class="item green">
    green
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="item red">
      red
    </div>
    <div class="item orange">
      pink
    </div>
  </div>
  <div class="column">
    <div class="item pink">
      orange
    </div>
    <div class="item yellow">
      yellow
    </div>
  </div>
</div>
<div class="row">
  <div class="item purple">
    purple
  </div>
</div>