Html 控制弹性容器中垂直排列的弹性项目的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41228403/
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
Control width of flex items arranged vertically in a flex container
提问by parliament
I'm trying to achieve the effect where the boxes labeled "HALF", take up only 50% of the width (aka they share the first row evenly).
我试图实现标记为“HALF”的框仅占宽度的 50%（也就是它们均匀地共享第一行）的效果。
The base requirement is that they remain in a single container. Is this possible to achieve using flexbox?
基本要求是它们保留在单个容器中。这可以使用 flexbox 实现吗？
I've tried playing around with flex-grow, flex-shrink, and flex-basisbut I'm afraid I'm not understanding how to make it work, or if it's even possible, given the single container requirement.
我试过玩弄flex-grow, flex-shrink,flex-basis但恐怕我不明白如何让它工作，或者如果有可能的话，考虑到单个容器的要求。
Consider this fiddle: http://jsfiddle.net/GyXxT/270/
考虑这个小提琴：http: //jsfiddle.net/GyXxT/270/
div {
border: 1px solid;
}
.container {
width: 400px;
display: flex;
flex-direction: column;
}
.child {
height: 200px;
}
.child.half {
flex: 1 1 10em;
color: green;
}
.child:not(.half) {
flex-shrink: 2;
flex-basis: 50%;
color: purple;
}<div class="container">
<div class="child half">
HALF
</div>
<div class="child half">
HALF
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
</div>采纳答案by kukkuz
Instead of flex-direction: column, you can try a wrappingflexbox using flex-wrap: wrap; and you can set:
相反flex-direction: column，您可以尝试使用; 来包装flexbox flex-wrap: wrap。你可以设置：
flex-basis: 50%for the half width divsflex-basis: 100%for the full width divs
flex-basis: 50%对于半宽 divflex-basis: 100%对于全宽 div
See that I have thrown in box-sizing: border-boxto adjust for the widths when using flex-basis.
看到我box-sizing: border-box在使用flex-basis时投入了调整宽度。
See demo below:
请参阅下面的演示：
div {
border: 1px solid;
box-sizing: border-box;
}
.container {
width: 400px;
display: flex;
flex-wrap: wrap;
}
.child {
height: 200px;
}
.child.half {
flex-basis: 50%;
color: green;
}
.child:not(.half) {
flex-basis: 100%;
color: purple;
}<div class="container">
<div class="child half">
HALF
</div>
<div class="child half">
HALF
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
</div>回答by Michael Benjamin
The flex sizing properties -- flex-grow, flex-shrink, flex-basisand flex-- work only along the main axisof the flex container.
柔性上浆性能- ，，和-只有沿着工作主轴的柔性容器。flex-growflex-shrinkflex-basisflex
Since your container is flex-direction: column, the main axis is vertical, and these properties are controlling height, not width.
由于您的容器是flex-direction: column，主轴是垂直的，并且这些属性控制高度，而不是宽度。
For sizing flex items horizontally in a column-direction container you'll need the widthproperty.
要在列方向容器中水平调整 flex 项目的大小，您将需要该width属性。
(Here's a more detailed explanation: What are the differences between flex-basis and width?)
（这里有更详细的解释：flex-basis 和 width 有什么区别？）
To achieve your layout with a single container, see another answer to this question.
要使用单个容器实现布局，请参阅此问题的另一个答案。
If you want to stay in column-direction, you'll need to wrap the .halfelements in their own container.
如果您想保持列方向，则需要将.half元素包装在它们自己的容器中。
.container {
display: flex;
flex-direction: column;
width: 400px;
}
.container > div:first-child {
display: flex;
}
.child.half {
flex: 1 1 10em;
color: green;
width: 50%;
}
.child {
height: 200px;
width: 100%;
border: 1px solid;
}
* {
box-sizing: border-box;
}<div class="container">
<div><!-- nested flex container for half elements -->
<div class="child half">HALF</div>
<div class="child half">HALF</div>
</div>
<div class="child">FULL</div>
<div class="child">FULL</div>
<div class="child">FULL</div>
<div class="child">FULL</div>
</div>回答by Ason
The base requirement is that they remain in a single container.
基本要求是它们保留在单个容器中。
That can also be done without flexbox, by simply float the 2 halfelements
这也可以不用flexbox，只需浮动 2 个half元素
div {
border: 1px solid;
box-sizing: border-box;
}
.container {
width: 400px;
}
.child {
height: 200px;
}
.child.half {
float: left;
width: 50%;
color: green;
}
.child:not(.half) {
width: 100%;
color: purple;
}<div class="container">
<div class="child half">
HALF
</div>
<div class="child half">
HALF
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
<div class="child">
FULL
</div>
</div>