Flex布局

一、flex布局原理

flex意为“ 弹性布局 ”  为盒子提供最大灵活度，任何一个盒子都可以指定为flex布局

flex布局原理：通过给父元素添加flex属性，来控制子盒子的位置和排列顺序

注：采用了flex布局的元素称为flex容器，简称“ 容器 ” ，容器中的所有子元素自动成为容器成员称为flex项目，简称“ 项目 ”。

• 当父元素指定为flex布局后，子元素中的float、clear、vertical-align 都会失效
• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

二、flex布局父项常见属性

1. flex-direction：设置主轴方向
2. justify-content：设置主轴上子元素排列方式
3. flex-wrap：设置子元素是否换行
4. align-content：设置侧轴上子元素排列方式（多行）
5. align-items：设置侧轴上子元素排列方式（单行）
6. flex-flow：复合属性（相当于直接设置了flex-direction和flex-wrap）

1、flex-direction 设置主轴方向

（1）在flex布局中分为主轴和侧轴，同样的叫法有行和列、x轴和y轴

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

（2）属性值

        flex-direction决定主轴的方向，即项目的排列方向

        主轴和侧轴是会变化的，取决于flex-direction设置主轴剩下的就是侧轴，所有子元素根据主轴排列

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

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

注：使用之前一定要确定主轴是哪一个

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

默认情况下flex-wrap是不换行的

4、align-content：设置侧轴上子元素排列方式（多行） 

 该属性只能在子元素出现换行的情况才能使用

 

5、align-items：设置侧轴上子元素排列方式（单行）

该属性是控制子元素在侧轴上的排列方式，在子项为单项时

6、align-content、align-items区别

align-items只适用于单行情况下，只有上对齐，下对齐，居中，拉伸

align-content适用于多行情况下，可以设置上对齐，下对齐，居中，拉伸以及平均分配剩余空间等属性

总结：单行找align-items 多行找align-content

7、flex-flow：复合属性（相当于直接设置了flex-direction和flex-wrap） 

三、flex布局子项常见属性 

• flex子项目占的份数
• align-self控制子项在自己侧轴的排列方式
• order定义子项的排列方式

1、flex属性 

定义子项目分配剩余空间，用flex表示占多少份数

语法：

       .items {

                      flex ：< number >;  /*default:0;*/

2、align-self控制子项在自己侧轴的排列方式

align-self允许单个项目与其他项目有不一样的对齐方式，可以覆盖align-items属性

默认值为auto表示继承align-items的属性，若无align-items，则等同于stretch

 3、order定义子项的排列方式

数值越小越靠前，默认为0

注：与z-index不同