CSS flexbox 在 HALF 中垂直拆分容器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36568572/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
flexbox vertically split container in HALF
提问by zsitro
Can anyone tell how can I make right topcontainer and right bottomcontainer to have the same height and to split the red container 50-50% vertically. No matter what is the content inside. I tried stretching content and have them wrapped while keeping flex-direction: rowto keep same height for items but I'm lost.
谁能告诉我如何使右上容器和右下容器具有相同的高度并将红色容器垂直拆分 50-50%。不管里面的内容是什么。我尝试拉伸内容并将它们包裹起来，同时保持flex-direction: row物品的高度不变，但我迷路了。
What I expect: right topcontainer grows the same height as right bottomwhich also results the leftcontainer growing automatically of course.
我期望的是：右顶部容器与右底部的高度相同，这当然也会导致左侧容器自动增长。
This is what I have so far: http://jsbin.com/rozoxoneki/edit?html,css,output
这是我到目前为止：http: //jsbin.com/rozoxoneki/edit?html,css,output
.flex{
display: flex;
border: 5px solid red;
&-child{
background: green;
border: 2px solid yellow;
flex: 1;
}
}
.flex--vertical{
flex-direction: row;
flex-wrap: wrap;
> .flex-child{
min-width: 100%;
}
}
<div class="flex">
<div class="flex-child">
left
</div>
<div class="flex-child flex flex--vertical">
<div class="flex-child">
<h1>right top</h1>
</div>
<div class="flex-child">
<h1>right bottom</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium autem esse iste voluptate eum ex mollitia temporibus unde eveniet omnis, vel, corrupti sed nobis consequatur quaerat ad sequi aliquid nostrum?</p>
</div>
</div>
</div>
采纳答案by michaPau
Intuitively one would expect that this would work just with a flex-direction: columnfor the main container and the left container's height set to 100%.
直觉上，人们会期望这仅flex-direction: column适用于主容器的 a 并且左侧容器的高度设置为 100%。
Instead all browser do this: (this is a quote from another stackoverflow question)
相反，所有浏览器都这样做：（这是另一个stackoverflow 问题的引述）
How is it possible that all major browsers got the flex container to expand on wrap in row-direction but not in column-direction?
所有主要浏览器怎么可能让 flex 容器在行方向而不是列方向上扩展？
So what you can do is wrap the two right containers into a new one:
所以你可以做的是将两个正确的容器包装成一个新的容器：
Like this HTML - schema:
像这个 HTML - 架构：
<div class="main-container">
<div class="left-container">Left container</div>
<div class="right-container">
<div class="half-containers">Top right</div>
<div class="half-containers">Bottom right</div>
</div>
</div>
Here is a jsfiddleas an example how you could style it for the expected result.
这是一个jsfiddle作为示例，您可以如何为预期结果设置样式。
In this example the 'main-container' is set to 50% width and 75% height of the body.
在此示例中，“主容器”设置为主体的 50% 宽度和 75% 高度。
回答by Felipe
The accepted answer is not idealfor the use of flex properties, because it can all be done without the need for min-heightor max-height
接受的答案对于使用 flex 属性并不理想，因为它可以在不需要min-height或max-height
I've cleaned up the example fiddleand removed non-essential css styles to show which flex properties are being used here.
我已经清理了示例小提琴并删除了非必要的 css 样式以显示此处使用了哪些 flex 属性。
In order to get evenly spaced top/bottom divs, you need to either specify the proper value for flex-basis, or let flex work itself out. Assuming that the parent's display is set to flex with a column orientation, the combined flexstyle can get us there easily:
为了获得均匀分布的顶部/底部 div，您需要为 指定适当的值flex-basis，或者让 flex 自行解决。假设父级的显示设置为以列方向进行弯曲，组合flex样式可以让我们轻松实现：
.half-containers {
flex: 1;
}
see more on flex stylingand the flex-basisproperty
查看更多关于flex 样式和flex-basis属性的信息
回答by Rob
Building on Felipe's answer, here is an even more minimal example of how to split a single flex container in half vertically. Each of these styles has been confirmed to be significant and necessary, except for the two at the bottom marked optional.
基于 Felipe 的回答，这里有一个更简单的示例，说明如何将单个 flex 容器垂直分成两半。除了底部标记为 的两个样式外，这些样式中的每一个都已被确认为重要且必要的optional。
(What got me was that every parent element needs to have a height: 100%set, or the whole thing breaks.)
（让我想到的是，每个父元素都需要有一个height: 100%集合，否则整个事情都会中断。）
HTML
HTML
<div id="container">
<div class="row">This is the top.</div>
<div class="row">This is the bottom.</div>
</div>
CSS
CSS
html, body {
height: 100%;
}
#container {
display: flex;
flex-direction: column;
height: 100%;
}
.row {
flex: 1;
}
/* optional: get rid of body margin. makes look nice. */
body {
margin: 0;
}
/* optional: shade the bottom row */
.row:nth-child(2) {
background: #bbb
}
Working CodePen here:
在这里工作 CodePen：
