相关疑难解决方法(0)
flex-grow不按预期调整flex项目的大小
似乎flex div中的内容会影响其有关flex-grow属性的计算大小.难道我做错了什么？
在下面提供的小提琴中,你会看到一个数字键盘.除底行外,所有行都包含3个数字.那行应该是'0'是2个数字的宽度,因此flex-grow: 2':'(冒号)是1个数字的大小,因此flex-grow: 1.
我在这里错过了什么吗？
'0'的右侧应与其上方的8,5和2对齐.有点过了.
.numbers {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
flex-grow: 1;
justify-content: space-between;
}
.button {
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
margin: 5px;
border-radius: 5px;
border: 1px solid gray;
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
}
.button#number0 {
flex-grow: 2;
}
.button#colon {
flex-grow: 1;
}<div class="numbers">
<div class="row">
<div class="button number" id="number1">1</div>
<div class="button number" id="number2">2</div>
<div …36
推荐指数
推荐指数
3
解决办法
解决办法
6318
查看次数
查看次数
了解flex-grow
我有3个div,如果我给flex: 0.5前两个div,如果我给的话,最后一个div应该移动到下一行flex-wrap: wrap.如果我错了,请纠正.
以下是我的html/css:
.parent {
display: flex;
height: 100px;
background-color: red;
flex-wrap: wrap;
}
.child-1 {
background-color: green;
flex: 0.5;
}
.child-2 {
background-color: yellow;
flex: 0.5;
}
.child-3 {
background-color: pink;
}<div class="parent">
<div class="child-1">LOREN IPSUM LOREN IPSUM</div>
<div class="child-2">LOREN IPSUMLOREN IPSUMLOREN IPSUM</div>
<div class="child-3">LOREN IPSUMLOREN IPSUM</div>
</div>请检查JSFiddle.
提前致谢.
8
推荐指数
推荐指数
1
解决办法
解决办法
2670
查看次数
查看次数
尽管有“flex: 1”和“flex-basis: 0”，Flexbox 子项并不相等
我有一个flexbox有两个孩子的人。我希望两个孩子有相同的大小，尽管一个有填充而另一个没有。
这是一个演示。我希望蓝色和绿色框的大小相等：
html, body, .container {
margin: 0;
width: 100%;
height: 100%;
}
.container {
display: flex;
}
.container div {
flex: 1;
min-width: 0;
flex-basis: 0;
}
.first {
background: cornflowerblue;
}
.second {
background: lightgreen;
padding: 100px;
}<div class="container">
<div class="first"> </div>
<div class="second"> </div>
</div>我知道我可以使用width: 50%，但这不是方向不可知的，如果我添加更多元素就会中断。
4
推荐指数
推荐指数
1
解决办法
解决办法
1173
查看次数
查看次数