Question

我正在尝试学习CSS flex的工作方式。我想创建一个带有一些块（项目）的全角全高面板。当弯曲方向为行（图像上的粉红色和黄色块）时，我不知道如何创建两个高度均为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好处，而不是尝试使用冗长的可折叠弯曲行来完成所有这些操作。这样，您就不会使用偶尔的自对齐属性或可能难以维护的属性，并且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>

Answer 2

我建议尝试通过创建行类和col类来创建网格，放置这些div很容易。像这样的东西

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

.column {
  flex-basis: 100%;
}

并安排您的div

CSS Flex行方向具有50％的列拉伸

2 个答案: