为什么当我们有flex-direction: column时，这些项不会自动缩小？

Question

我有以下HTML和CSS：

​

.box-1 {
  background: #e51400;
}
.box-2 {
  background: #fa6800;
}
.box-3 {
  background: #f0a30a; 
}
.box-4 {background: #e3c800; }
.box-5 {background: #a4c400;}
.box-6 {background: #60a917;}
.box-7 {background: #00aba9;}
.box-8 {background: #1ba1e2;} 
.box-9 {background: #aa00ff;}

.container {
  display: flex;
  border: 8px solid black;
  height: 500px;
  display: flex;
  flex-direction: column;
}

.box {
    font-size: 50px;
    color: white;
    text-align:center;
    font-family: lato;
    font-weight: 300;
    box-sizing: border-box;
    width: 300px;
}

<section class="container">
        <div class="box box-1">1</div>
        <div class="box box-2">2</div>
        <div class="box box-3">3</div>
        <div class="box box-4">4</div> 
        <div class="box box-5">5</div>
        <div class="box box-6">6</div>
        <div class="box box-7">7</div>
        <div class="box box-8">8</div>
        <div class="box box-9">9</div>  
</section>

​

当我们在flex-items上设置了flex-direction: row (默认值)和width时，它们会在父元素中缩小，所以现在它们的宽度不是300px，它们会尝试缩小以适应父元素的宽度，因为flex-shrink属性在flexbox中的默认值为1。

但是，当我将flex-direction: row更改为flex-direction: column时，flex项将移出父级的height。为什么会这样呢？

Answer 1

您有9个高度为60px的.box元素，它们试图适应高度为500px的.container。

如果你计算一下: 9*60px = 540px，它比你的.container高度还大。

你的.boxes的内容不会因为你设置了一个font-size: 50px而缩小，总的行高是60px。这是因为the CSS line-height property is by default at 110% or 120% depending on your browser

在本例中，元素的总高度为

font-size * line-height => 50px * 1.2 => 60px

这不是.box中的空闲空间，因为flexbox将能够收缩以适应容器中的盒子。

正如teefars提到的，我向read a guide about flexbox推荐你