这个问题在这里已有答案:
我正在尝试制作一个4行3列的数字键盘。我用过flex-wrap
和flex-basis: 33.33%
的flexbox。
问题是我的列之间需要一些余量,但是一旦我像margin: 0.5em
一样,它就会推动一个项目,每行只有2个。
填充不起作用,边距不起作用,边框不适用于我的透明背景。
.digit-grid {
display: flex;
flex-wrap: wrap;
font-size: 2em;
}
.box {
flex-basis: 33.33%;
margin: 0.5em;
background: gray;
height: 50px;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
<div class="digit-grid">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
<div class="box box7">7</div>
<div class="box box8">8</div>
<div class="box box9">9</div>
<div class="box box10">10</div>
<div class="box box11">11</div>
<div class="box box12">12</div>
</div>
您可以使用calc
中的flex-basis
调整保证金,例如calc(33.33% - 1em)
- 请参阅下面的演示:
.digit-grid {
display: flex;
flex-wrap: wrap;
font-size: 2em;
background: black;
}
.box {
flex-basis: calc(33.33% - 1em);
margin: 0.5em;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
<div class="digit-grid">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
<div class="box box7">7</div>
<div class="box box8">8</div>
<div class="box box9">9</div>
<div class="box box10">10</div>
<div class="box box11">11</div>
<div class="box box12">12</div>
</div>