0
我试图做一个容器的div所有的div将具有相同的宽度(每行两个div,每个容器的50%宽度)。Flex项目覆盖最大宽度属性
我已经在容器内设置了div,因为我希望它们是平等的,但在这行中只有一个项目时,它似乎并不尊重这个max-width
。
HTML:
<div id="container">
<div id="left" class="block">Left</div>
<div id="center" class="block">
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
<div class="flexContainer">
<div class="flexDiv"></div>
</div>
</div>
<div id="right" class="block">Right</div>
</div>
CSS:
html, body{
width: 100%;
height: 100%;
}
#container{
display: flex;
height: 100%;
background-color: blue;
}
.block{
flex: 1;
}
#left{
background-color: green;
}
#center{
display: flex;
flex: 1;
flex-wrap: wrap;
align-content: flex-start;
}
#right{
background-color: orange;
}
.flexContainer{
flex: 1;
min-width: 100px;
max-width: 50%;
height: 150px;
background-color: red;
padding: 10px;
}
.flexDiv{
width: 100%;
height: 100%;
background-color: yellow;
}
JSFiddle中,你可以看到第三个元素的宽度是如何比别人更大。
为什么flex
容器内的div不尊重max-width
属性?
在此先感谢!
你的意思是喜欢这个? - https://jsfiddle.net/yz9cd8e7/ –
@Paulie_D是的,就是这个。如果您在答案中提供解释,我会将其标记为已接受:) –
没问题...基本上它是一个“盒子大小”问题。 @Gyryrillus已经提供了答案。 –