我想知道是否可以将柔性物品水平对齐到同一容器中较大的柔性物品.使用CSS浮动它很容易实现,但我无法使用flex项目完成它.
查看此JSFiddle以获取Flexbox示例.
查看此JSFiddle是一个浮动示例
网格布局
CSS
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
max-width: 500px;
margin-right: auto;
margin-left: auto;
}
.small-flex-item {
flex-basis: 33.333%;
background: #000;
padding-top: 30%;
}
.large-flex-item {
flex-basis: 66.667%;
background: #333;
padding-top: 60%;
}
Oriol.. 13
Flexbox不喜欢通过多个列或行扩展的flex项,因为实际上flexbox没有网格概念.
但是,使用一些技巧,您可以实现此布局(以及更复杂的布局):
使用行布局
???????
?1?2?3?
???????
允许换行符flex-wrap: wrap.
使用伪元素在2之后强制换行
?????
?1?2?
?????
?3?
???
用于width: 33%2和3,以及flex: 11.
???????????????????????
?1 ?2 ?
???????????????????????
?3 ?
???????
设为margin-left: auto3
???????????????????????
?1 ?2 ?
???????????????????????
?3 ?
???????
选择一些长度 x
设置height: x为2和3.设置height: 2*x为1.
???????????????????????
?1 ?2 ?
? ???????
? ?
???????????????????????
?3 ?
???????
设为margin-bottom: -x1:
???????????????????????
?1 ?2 ?
? ???????
? ?3 ?
???????????????????????
注意flexbox引入auto了新的初始值min-width.这可能会让内容迫使一些盒子增长.这将打破布局,所以用禁用min-width: 0或者设置overflow到任何东西,但visible.
这是代码:
.flex-container {
display: flex;
flex-flow: row wrap;
}
.flex-item {
overflow: hidden;
}
.flex-container::after {
content: '';
width: 100%; /* Force line break */
}
.large.flex-item {
flex: 1;
height: 200px;
margin-bottom: -100px;
background: red;
}
.small.flex-item {
width: 33.333%;
height: 100px;
background: green;
}
.small.flex-item + .small.flex-item {
order: 1;
margin-left: auto;
background: blue;
}
1
2
3
但是,修改HTML以便嵌套Flexbox会更容易.
Flexbox不喜欢通过多个列或行扩展的flex项,因为实际上flexbox没有网格概念.
但是,使用一些技巧,您可以实现此布局(以及更复杂的布局):
使用行布局
???????
?1?2?3?
???????
允许换行符flex-wrap: wrap.
使用伪元素在2之后强制换行
?????
?1?2?
?????
?3?
???
用于width: 33%2和3,以及flex: 11.
???????????????????????
?1 ?2 ?
???????????????????????
?3 ?
???????
设为margin-left: auto3
???????????????????????
?1 ?2 ?
???????????????????????
?3 ?
???????
选择一些长度 x
设置height: x为2和3.设置height: 2*x为1.
???????????????????????
?1 ?2 ?
? ???????
? ?
???????????????????????
?3 ?
???????
设为margin-bottom: -x1:
???????????????????????
?1 ?2 ?
? ???????
? ?3 ?
???????????????????????
注意flexbox引入auto了新的初始值min-width.这可能会让内容迫使一些盒子增长.这将打破布局,所以用禁用min-width: 0或者设置overflow到任何东西,但visible.
这是代码:
.flex-container {
display: flex;
flex-flow: row wrap;
}
.flex-item {
overflow: hidden;
}
.flex-container::after {
content: '';
width: 100%; /* Force line break */
}
.large.flex-item {
flex: 1;
height: 200px;
margin-bottom: -100px;
background: red;
}
.small.flex-item {
width: 33.333%;
height: 100px;
background: green;
}
.small.flex-item + .small.flex-item {
order: 1;
margin-left: auto;
background: blue;
}
1
2
3
京公网安备 11010802040832号 | 京ICP备19059560号-6 