使用 Flexbox 构建网格 - 如何设置多个项目/Div 并排放置?
Building Grid with Flexbox - How to setup multiple Items / Divs beside and down each other?
我想用 Flexbox 构建我的网格,但有点卡住了。
如何设置一个盒子并朝向右侧的多个盒子,其大小是盒子 1 的一半。然后盒子 2-5 应该向盒子 1 浮动。
在 Scribble 中了解我的意思以及它应该是什么样子?
.wrapper {
display: flex; /* Magic begins */
}
.left, .right {
flex: 1; /* Distribute width equally */
}
.right {
flex-wrap: wrap; /* Allow multiple lines */
}
.box {
display: flex;
align-items: center; /* Center content vertically */
justify-content: center; /* Center content horizontally */
width: calc(50% - 4px);
margin: 1px 2px;
background: #000;
color: #fff;
}
<div class="wrapper">
<div class="left box">
Box 1
</div>
<div class="right wrapper">
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
</div>
</div>
我想用 Flexbox 构建我的网格,但有点卡住了。 如何设置一个盒子并朝向右侧的多个盒子,其大小是盒子 1 的一半。然后盒子 2-5 应该向盒子 1 浮动。
在 Scribble 中了解我的意思以及它应该是什么样子?
.wrapper {
display: flex; /* Magic begins */
}
.left, .right {
flex: 1; /* Distribute width equally */
}
.right {
flex-wrap: wrap; /* Allow multiple lines */
}
.box {
display: flex;
align-items: center; /* Center content vertically */
justify-content: center; /* Center content horizontally */
width: calc(50% - 4px);
margin: 1px 2px;
background: #000;
color: #fff;
}
<div class="wrapper">
<div class="left box">
Box 1
</div>
<div class="right wrapper">
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
</div>
</div>