CSS Flexbox边界被切断为100vh？如何制作全屏盒子？

2023年4月9日 273次阅读

我正在使用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>
点赞