我有一个布局,包含一个包含一堆项目的有序列表.
所有项目都具有一致的宽度和高度 – 除了第一项 – 宽(3x)和(2x)更高.它看起来像这样：
ol {
padding:0;
margin:0;
min-width: 488px;
}
li {
list-style: none;
width: 150px;
padding-bottom: 16.66%;
border: 5px solid tomato;
display: inline-block;
}
li:first-child {
float:left;
width: 478px;
border-color: green;
padding-bottom: 34.25%;
margin: 0 4px 4px 0;
}Codepen Demo(调整视口大小以查看效果)
目前,我正在使用浮动和内联块来实现布局,但我想使用flexBox,因为flexBox提供了一些额外的功能.
我做了几次尝试,但没有成功 –
尝试#1 – Codepen
ol {
/* ... */
display: flex;
flex-wrap: wrap;
}
尝试#2 – Codepen
在列表前使用浮动以确保第一个大型列表项的空间
然后在第一个列表项上设置显示绝对值.
在两次尝试中,第一行中的红色框都会拉伸以填充第一个项目的高度.
这可能吗？
(如果没有,那么我会对CSS网格解决方案感兴趣)
最佳答案
所以很明显FlexBox不能产生这样的布局.所以我会回答这部分问题：
原文链接：https://www.f2er.com/css/426969.htmlIf not,then I would be interested in a CSS grid workaround
使用CSS Grid Layout Module,这非常容易生产：
基本上相关的代码归结为：
Codepen Demo(调整大小以查看效果)
ul {
display: grid; /* (1) */
grid-template-columns: 120px 120px repeat(auto-fill,120px); /* (2) */
grid-template-rows: repeat(auto-fill,150px); /* (3) */
grid-gap: 1rem; /* (4) */
justify-content: space-between; /* (5) */
}
li:first-child {
grid-column: 1 / 4; /* (6) */
grid-row: 1 / 3; /* (7) */
}
1)使容器元素成为网格容器
2)将网格设置为至少3列宽度为120px的列. (自动填充值用于响应式布局).
3)将网格设置为150px高行.
4)设置网格行和列的间隙/檐槽 – 这里,因为需要’间隔’布局 – 间隙实际上是最小间隙,因为它将根据需要增长.
5)类似于flexBox.
6)占据前三列
7)占据前两排
body {
margin: 0;
}
ul {
display: grid;
grid-template-columns: 120px 120px repeat(auto-fill,120px);
grid-template-rows: repeat(auto-fill,150px);
grid-gap: 1rem;
justify-content: space-between;
/* boring properties: */
list-style: none;
width: 90vw;
height: 90vh;
margin: 4vh auto;
border: 5px solid green;
padding: 0;
overflow: auto;
}
li {
background: tomato;
min-height: 150px;
}
li:first-child {
grid-column: 1 / 4;
grid-row: 1 / 3;
}目前由Chrome(Blink)和Firefox支持,得到IE和Edge的部分支持(见Rachel Andrew的this post)
