控制柔性容器中各个孩子的宽度 [英] Control width of individual children in flex container

问题描述

我试图达到这样的效果，即标有HALF的框只占用50％的宽度（即它们均匀地共享第一行）基本要求是，他们仍然在一个容器。这可能实现使用flexbox？

我尝试过使用 flex-grow ， flex-shrink 和 flex-basis ，但是恐怕我不理解如何使其工作，或者如果甚至可能的话，考虑到单个容器的要求。

考虑这个小提琴： http：// jsfiddle .net / GyXxT / 270 /

div {border： 1px solid;}。container {width：400px;显示：flex; flex-direction：column;}。child {height：200px;}。child.half {flex：1 1 10em; color：green;}。child：not（.half）{flex-shrink：2;弹性基础：50％;颜色：紫色; }

< 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>

解决您可以使用 flex来试用包装 flexbox，而不是 flex-direction：column -wrap：wrap ;你可以设置：
$ b

1. flex-basis：50％ for半宽div




2. flex-basis：100％

看到我已经在 box-sizing：border-box 在使用 flex-basis 时调整宽度。

请参阅下面的演示：

  div {border：1px solid; box-sizing：border-box;}。container {width：400px;显示：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>

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).

The base requirement is that they remain in a single container. Is this possible to achieve using flexbox?

I've tried playing around with flex-grow, flex-shrink, and flex-basis but I'm afraid I'm not understanding how to make it work, or if it's even possible, given the single container requirement.

Consider this fiddle: 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>

解决方案

Instead of flex-direction: column, you can try a wrapping flexbox using flex-wrap: wrap; and you can set:

1. flex-basis: 50% for the half width divs

2. flex-basis: 100% for the full width divs

See that I have thrown in box-sizing: border-box to adjust for the widths when using 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>

这篇关于控制柔性容器中各个孩子的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！