flex布局

Posted 2021-02-16 jianxian

（1）弹性容器与弹性元素

    对于某个元素只要声明了display: flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性。

①弹性容器中的所有子元素称为<弹性元素>，弹性元素永远沿主轴排列
②弹性元素也可以通过display:flex设置为另一个弹性容器，形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素

    弹性容器的两根轴非常重要，所有属性都是作用于轴的。下面从轴入手，将所有flex布局属性串起来理解。

 

（2）主轴方向

    可以在弹性容器上通过flex-direction修改主轴的方向

①flex-direction: row;横向-由左到右

②flex-direction: row-reverse;反向横向-由右到左

 

③flex-direction: column;纵向-由上到下

 

④flex-direction: column-reverse;纵向-由下到上

 

 

（3）沿主轴的排列折行处理

  flex-wrap: nowrap | wrap | wrap-reverse可使得主轴上的元素不折行、折行、反向折行。

    ①默认是nowrap不折行，难道任由元素直接溢出容器吗？当然不会，那么这里就涉及到元素的弹性伸缩应对，下面会讲到。

 ②wrap折行，顾名思义就是另起一行，那么折行之后行与行之间的间距（对齐）怎样调整？这里又涉及到交叉轴上的多行对齐。

 ③wrap-reverse反向折行，是从容器底部开始的折行，但每行元素之间的排列仍保留正向。

flex-wrap:nowrap;不换行

flex-wrap:wrap;换行

 

flex-wrap:wrap-reverse;反向换行

 

 

（4）复合属性flex-flow弹性流/工作流

flex-flow = flex-drection + flex-wrap

    flex-flow相当于规定了flex布局的“工作流(flow)”。例如：

flex-flow: row wrap;

 

（5）弹性伸缩应对

flex-shrink：缩小比例（容器宽度<元素总宽度时如何收缩）
flex-grow：放大比例（容器宽度>元素总宽度时如何伸展）

    ①缩小比例flex-shrink

    场景：弹性容器main宽度为700px，容器里有3个弹性元素，宽度分别为200px、300px、400px。在不折行的情况下，此时容器宽度是明显不够分配的。实际上，flex-shrink默认为1，也就是当不够分配时，元素都将等比例缩小，占满整个宽度，如下图。

flex-shrink: 1;

    注意：先抛结论：flex-shrink: 1并非严格等比缩小，它还会考虑弹性元素本身的大小。加入弹性元素本身大小作为计算方法的考虑因素，主要是为了避免将一些本身宽度较小的元素在收缩之后宽度变为0的情况出现。

    ②放大比例flex-grow

    同样，弹性容器main宽度是700px，但此时三个弹性元素，宽度分别是100px、200px、300px。此时容器宽度是有剩余的。那么剩余的宽度该怎样分配？而flex-grow则决定了要不要分配以及各个分配多少。

    1、在flex布局中，容器剩余宽度默认是不进行分配的，也就是所有弹性元素的flex-grow都为0

    2、通过指定flex-grow为大于零的值，实现容器剩余宽度的分配比例设置

 

 

 

 

 

 

 

 

 

 

.