Flex 弹性布局

flex布局介绍

---

前言

最近复习了一下flex弹性布局，感觉之前记住就总会忘，写下一篇文章，与小伙伴一起分享

---

一、什么是flex布局？

flex又称为“弹性布局”，作用是使盒子具有更高的灵活性。

二、基本概念：

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平主轴和垂直的交叉轴

三、：布局属性

所有属性在父盒子进行添加，且父盒子最先要给出display：flex

1. flex-direction属性：
   （1）row：默认值，水平为主轴从左到右显示
   （2）row-reverse：与row相同，从右到左显示
   （3）colum :垂直为主轴从上到下显示

   （4）colum-reverse：与colum类似，从下到上显示

2. flex-wrap属性：
   （1）no-wrap：默认，不换行显示；不换行显示在不够显示的情况下，会自动对子元素进行压缩
   （2）wrap：换行显示，第一行在上方，一行不够显示进行换行显示，不会对子元素进行压缩处理
   

（3）wrap-reverse：换行显示，第一行在下方

1. flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
   flex-flow: flex-direction flex-wrap;
2. justify-content属性:定义项目在主轴上的对齐方式
   （1）flex-start: 左对齐
   （2）flen-end:右对齐
   （3）center:居中
   （4）space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

（5）space-between：两端对齐，项目之间的间隔都相等。

3. align-items属性：属性定义项目在交叉轴上如何对齐
   （1）flex-start:交叉轴的起点对齐

（2）flex-end：交叉轴的终点对齐

（3）center：交叉轴的中点对齐

（4）baseline: 项目的第一行文字的基线对齐

（5）stretch：默认值，如果项目未设置高度或设为auto，将占满整个容器的高度。

4. align-content属性：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
   （1）flex-start：与交叉轴的起点对齐
   （2）flex-end：与交叉轴的终点对齐
   （3）center：与交叉轴的中点对齐
   （4）space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
   （5）space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
   （6）stretch（默认值）：轴线占满整个交叉轴。

总结

希往总结的这些知识点能够帮助到到家