Question

我希望将窗口分成两个相等的部分，相同的高度，但每个的宽度为50％。

所以我用了这个

.container {
    display: flex;
    height : 100%;       
}

.column {
    flex: 1;
    height : 100%;
}

.column-one {
    order: 1;

}
.column-two {
    order: 2;        
}

我的html结构如下

<div class="container">

<div class="column column-one"> Column 1
    <div  class="x" id="sliceX" ></div>
    <div  class="y" id="sliceY"></div>
    <div  class="z" id="sliceZ"></div>
</div>

<div class="column column-two"> Column 2
    <div  class="x" id="sliceX2"> </div>
    <div  class="y" id="sliceY2"></div>
    <div  class="z" id="sliceZ2"></div>
</div>

</div>

这很好用。

现在我希望我的.x占据宽度的100％但高度的50％。之后会显示.y和.z。两者都占50％的高度（其余）。但每个班级只占宽度的50％，因此.y将显示在左侧，.z将显示在右侧

像这样：

Col1 Col2
xxxx xxxx
xxxx xxxx
yyzz yyzz
yyzz yyzz

如何构建我的css，让我的实际分离工作在2列？

Answer 1

你可以尝试的一件事是让你的.column成为一个弹性容器，并设置它的包装以允许包装。然后将.x设置为width:100%;，将.y, .z设置为width:50%;，然后将它们全部设为height:50%;

像这样：

.column {
    flex: 1;
    height : 100%;
    display:flex;
    flex-wrap:wrap;
}
.x{
  width:100%;
  height:50%;
}
.y, .z{
  width:50%;
  height:50%;
}

请参阅此fiddle。

Answer 2

您可能会获得第二个flex定义的最佳结果。您可以使用flex-wrap非常有效地包装布局。像这样：

html,
body {
  height: 100%;
  margin: 0;
}
.container {
  display: flex;
  height: 100%;
  align-items: stretch;
}
.column {
  flex: 0 0 50%;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.x {
  flex: 0 0 100%;
}
.y, .z {
  flex: 0 0 50%;
}
.x {background-color: #ff8080}
.y {background-color: #80ff80}
.z {background-color: #8080ff}

<div class="container">
  <div class="column column-one">
    <div class="x" id="sliceX"></div>
    <div class="y" id="sliceY"></div>
    <div class="z" id="sliceZ"></div>
  </div>

  <div class="column column-two">
    <div class="x" id="sliceX2"></div>
    <div class="y" id="sliceY2"></div>
    <div class="z" id="sliceZ2"></div>
  </div>
</div>

在上文中，.x占据宽度的100％，将.y和.z推到第二行。然后每个都占据宽度的50％，结果很好。您当然可以进一步将余额调整为30/70或您选择的任何内容。

顺便说一句，使用Flex非常棒 - 这绝对是这项工作的绝佳工具：）

用于显示多个div的CSS技巧

2 个答案: