我正在使用normalize css 3.0.3,我的flexbox css是这样的:
.container {
display: flex;
border: 10px solid goldenrod;
min-height: 100vh; /* height 100%*/
flex-direction: row;
}
.box {
color: white;
font-size:100px;
text-shadow: 4px 4px 0 rgba(0,0,0,0.1);
padding:10px;
}
.box1 { background:#1abc9c; }
.box2 { background:#3498db; }
.box3 { background:#9b59b6; }
.box4 { background:#34495e; }
.box5 { background:#f1c40f; }
.box6 { background:#e67e22; }
.box7 { background:#e74c3c; }
.box8 { background:#bdc3c7; }
.box9 { background:#2ecc71; }
.box10 { background:#16a085; }
我的HTML是:
<div class="container">
<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>
我注意到边框的底部在谷歌浏览器中被切断了,这只有在我向下“向下滚动”时才能看到.如何让边框适合我正在看的窗口?
另外,如果我想设置flex-direction:列,我该如何获取它以使每个“盒子”填满整个屏幕?
最佳答案 只需将.container上的box-sizing设置为border-box,并在flex-items上使用flex:1.
.container {
box-sizing: border-box;
display: flex;
border: 10px solid goldenrod;
min-height: 100vh; /* height 100%*/
flex-flow: row nowrap;
}
.container:nth-child(odd) {
flex-flow: column nowrap;
}
.box {
flex: 1;
color: white;
font-size:200%;
text-shadow: 4px 4px 0 rgba(0,0,0,0.1);
padding:10px;
}
.box1 { background:#1abc9c; }
.box2 { background:#3498db; }
.box3 { background:#9b59b6; }
.box4 { background:#34495e; }
.box5 { background:#f1c40f; }
.box6 { background:#e67e22; }
.box7 { background:#e74c3c; }
.box8 { background:#bdc3c7; }
.box9 { background:#2ecc71; }
.box10 { background:#16a085; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet"/>
<div class="container">
<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>
<div class="container">
<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>