使用FlexBox (或其他css)，是否可以在每行中具有不同数量的相同大小的列(即，而不使用空的div)？
使用FlexBox (或其他css)，是否可以在每行中具有不同数量的相同大小的列(即，而不使用空的div)？
提问于 2018-07-24 04:16:45
我特别寻找一个2行的网格- row1有2列，row2有3列，其中每列/行(网格中的ie.item)大小相等。它可以使用空的div，但显然这不是首选的解决方案……
我已经包含了一些基本的html / css示例来说明我的意思，但我希望在不使用空div的情况下实现类似的功能。
CSS
html, body {
height: 100%;
margin: 0;
}
.grid {
min-height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.grid > div {
display: flex;
flex-basis: calc(33.33% - 14px);
justify-content: center;
flex-direction: column;
}
.grid > div > div {
display: flex;
justify-content: center;
flex-direction: row;
}
.box { margin: 10px 0 10px 10px}
.box1 { background-color: red; }
.box2 { background-color: orange; }
.box3 { background-color: blue; }
.box4 { background-color: grey; }
.box5 { background-color: purple; }HTML
<div class="grid">
<div class="box box1">
<div>
one
</div>
<div>
example content
</div>
</div>
<div class="box box2">
<div>
two
</div>
<div>
example content
</div>
</div>
<div></div>
<div class="box box3">
<div>
three
</div>
</div>
<div class="box box4">
<div>
four
</div>
</div>
<div class="box box5">
<div>
five
</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-24 04:30:17
有了前面的空格
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 1000px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
grid-gap: 1px;
}
.container > div{
background-color: orangered;
height: 50px;
}
.box1{
grid-column: 2 / 3;
}<div class="container">
<div class="box1">box 1</div>
<div class="box2">box 2</div>
<div class="box3">box 3</div>
<div class="box4">box 4</div>
<div class="box5">box5</div>
</div>
后面有空格
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 1000px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
grid-gap: 1px;
}
.container > div{
background-color: orangered;
height: 50px;
}
.box3{
grid-column: 1 / 2;
}<div class="container">
<div class="box1">box 1</div>
<div class="box2">box 2</div>
<div class="box3">box 3</div>
<div class="box4">box 4</div>
<div class="box5">box5</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51486641
复制相关文章
相似问题