似乎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;
}
1
2
3
4
5
6
7
8
9
0
:
https://jsfiddle.net/0r4hemdu/
问题是第1-3行有两个水平边距,第四行只有一个.
水平边距为10px,第4行的可用空间比其他行多10px.这会抛弃列的对齐.
因为flex-grow仅适用于自由空间,并且受内容和边距的影响很大,所以它不是调整弹性项目大小的最安全方式.
试试吧flex-basis.将其添加到您的代码中:
.button { flex-basis: 33.33%; }
#number0 { flex-basis: calc(66.67% + 10px); }
* { box-sizing: border-box; }
.numbers {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
flex-grow: 1;
justify-content: space-between;
}
.button {
display: flex;
flex-basis: 33.33%;
justify-content: center;
align-items: center;
margin: 5px;
border-radius: 5px;
border: 1px solid gray;
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
}
#number0 { flex-basis: calc(66.67% + 10px); }
* { box-sizing: border-box; }
1
2
3
4
5
6
7
8
9
0
:
更新3:
我想出了另一种摆脱错位的方法.
此版本与2:nd更新一起使用原始html未更改,并使用伪元素创建按钮,包括按钮悬停/单击效果.
flex 唯一的版本
.row {
width: 60%;
margin: auto;
display: flex;
}
.button {
flex: 0 0 33.3%;
text-align: center;
position: relative;
padding: 10px 5px;
box-sizing: border-box;
pointer-events: none;
}
.button#number0 {
flex: 0 0 66.6%;
}
.button:before,
.button:after {
content: " ";
border-radius: 5px;
border: 1px solid gray;
cursor: pointer;
position: absolute;
left: 5px;
top: 5px;
right: 5px;
bottom: 5px;
pointer-events: auto;
}
.button:before {
background: rgba(255, 255, 255, 0.9);
z-index: -1
}
.button:hover:before {
background: rgba(0, 0, 0, 0.1);
}
.button:hover:after {
border: 2px solid red;
}
.button:active:before {
background: rgba(255, 0, 0, 0.5);
}
1
2
3
4
5
6
7
8
9
0
:
我认为Michael_B所说的一切都是正确的.只有解决方案有点尴尬.我个人不喜欢计算.它感觉不对劲.
你遇到的问题是更普遍的问题.你把太多的责任放在一个元素上.在这种情况下,它是.button班级.灵活增长的Flex和Margin是太多的责任.试着打破这一点.它意味着更多的DOM元素,但它可以为您节省很多痛苦.
.numbers {
display: flex;
flex-direction: column;
max-width: 200px;
margin: 0 auto;
}
.row {
display: flex;
flex-direction: row;
flex-grow: 1;
justify-content: space-between;
}
.row > .box {
display: flex;
flex-basis: 33.3333%;
justify-content: center;
align-items: center;
}
.row > .box.box-2 {
flex-basis: 66.6667%;
}
.button {
border-radius: 5px;
border: 1px solid gray;
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
width: auto;
text-align: center;
margin: 5px;
width: 100%;
}
1
2
3
4
5
6
7
8
9
0
:
京公网安备 11010802040832号 | 京ICP备19059560号-6 