如何使用flexbox强制拆分成相等的部分 [英] How to force division into equal parts using flexbox

问题描述

在这样一个dom结构中：

 < div id =1> 
< div id =2> 
< div id =3> 
< / div> 
< / div> 
< div id =4> 
< div id =5> 
< / div> 
< / div> 
< / div> 
  

用css指定为：

 ＃1 {
 display：flex; 
 flex-direction：row; 
} 
＃2，＃4 {
 flex：1; 
 
 
 
 
 
 $ b 
具有id 2和4的div将被平均分配，只要总和在id 3和5中的内容的宽度不超过id 1的dom的宽度。
 
 
当总和超过宽度时，它们不是均匀分布的，而内容较宽的则占用更多的宽度。即使在这种情况下，我如何强制2和4使用flexbox甚至占用宽度？
 
 
 
我不想使用宽度指定百分比。我想坚持flexbox。
 
解决方案
如果您希望元素独立增长或缩小到内容，请指定零弹性基础：
  flex-basis：0;不过，我的演示程序在Chrome中无法正常工作：无论设置了零基准，大图像都会伸展它的父容器。作为解决方法，可以设置最大宽度： 
 
 
  img {
最大宽度：100％; 
 height：auto; 
} 
  
 
In a dom structure like this:
<div id="1">
  <div id="2">
    <div id="3">
    </div>
  </div>
  <div id="4">
    <div id="5">
    </div>
  </div>
</div>
with css specified as:
#1{
  display: flex;
  flex-direction: row;
}
#2, #4{
  flex: 1;
}
The divs with id 2 and 4 will be evenly distributed as long as the sum of the width of the contents in id 3 and 5 does not exceed the width of the dom with id 1.

When the sum exceeds the width, they are not evenly distributed, and one with wider content will take up more width. How can I force 2 and 4 to take up even width using flexbox even in such cases?

I do not want to use width specification by percent. I want to stick to flexbox.
解决方案
If you want elements to grow or shrink independently to it's content, specify zero flex basis:
flex-basis: 0;
However, my demo incorrectly works in Chrome: large image stretches it's parent container no matter that zero basis has been set. As a workaround, maximum width can be set:
img {
  max-width: 100%;
  height: auto;
}


                        
这篇关于如何使用flexbox强制拆分成相等的部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！