Flex布局

一、首先，什么是Flex布局？

        Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。

二、Flex布局与传统布局的区别

        传统布局：1.兼容性好 2.布局繁琐 3.局限性，不能再移动端很好的布局

        Flex布局：1.操作方便，布局极为简单，移动端应用很广泛 2.PC 端浏览器支持情况较差

三、Flex属性

        1、flex-direction：设置主轴的方向 默认为row

        2、justify-content：设置主轴上的子元素排列方式

        3、flex-wrap：设置子元素是否换行

        4、align-content：属性定义了多根轴线的对齐方式

        5、align-items：定义项目在交叉轴上如何对齐

        6、flex-flow：flex-direction属性和flex-wrap属性的简写形式

1、flex-direction设置主轴的方向

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

主轴与侧轴：在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ： 行和列、x 轴和y 轴

• 默认主轴方向就是 x 轴方向，水平向右

• 默认侧轴方向就是 y 轴方向，水平向下

属性值

• flex-direction 属性决定主轴的方向（即项目的排列方向）

• 注意： 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

2、justify-content设置主轴上的子元素排列方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

• justify-content 属性定义了项目在主轴上的对齐方式

• 注意： 使用这个属性之前一定要确定好主轴是哪个

3、flex-wrap设置子元素是否换行

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• 默认情况下，项目都排在一条线（又称”轴线”）上。

• flex-wrap属性定义子元素是否换行

• nowrap ：默认值，不换行

• wrap ：换行

4、align-items定义项目在交叉轴上如何对齐

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用

• flex-start ：默认值 从上到下

• flex-end ：从下到上

• center ：挤在一起居中（垂直居中）

• stretch ：拉伸

5、align-content属性定义了多根轴线的对齐方式

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

• 设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。

6、flex-flow：flex-direction属性和flex-wrap属性的简写形式

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}