Flex布局

Flex布局

布局原理

• flexible Box：弹性布局、伸缩布局
• 父盒子使用flex布局后，子元素float、clear、vertical-align属性失效
• flex容器（flex container：父容器）、flex项目（flex item：子项目）
• 原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

父项常见属性

• flex-direction：设置主轴的方向
• justify-content：设置主轴上的子元素排列方式
• flex-wrap：设置子元素是否换行
• align-content：设置侧轴上的子元素排列方式（多行）
• align-items：设置侧轴上的子元素排列方式（单行）
• flex-flow：符合属性，相当于flex-direction和flex-wrap

1. 主轴和侧轴

   （1）默认主轴为x方向、侧轴为y方向

   （2）通过flex-direction修改主轴方向

   属性值	说明
   row	默认值从左到右
   row-reverse	从右到左
   column	从上到下
   column-reverse	从下岛上

   注意：元素跟着主轴排列

2. justify-content

   用于设置主轴上的子元素排列方式

   属性值	说明
   flex-start	默认值从头部开始，沿主轴排列
   flex-end	从尾部开始排列，顺序不变
   center	在主轴居中对齐
   space-around	平分剩余空间
   space-between	先贴两边，再平分剩余空间

   注意：使用前先确定好主轴

3. flex-wrap

   设置子元素是否换行，flex布局默认不换行

   属性值	说明
   nowrap	默认值，不换行
   wrap	换行

4. align-items

   设置侧轴上的子元素排列方式（单行）

   属性值	说明
   flex-start	默认值，从上到下
   flex-end	从下到上
   center	居中对齐
   stretch	拉伸

   拉伸时，子盒子不要给高度

5. align-content

   设置侧轴上子元素的排列方式（多行）

   属性值	说明
   flex-start	默认值从侧轴头部开始排列
   flex-end	从侧轴的尾部开始排列
   center	在侧轴居中对齐
   space-around	平分侧轴剩余空间
   space-between	先贴侧轴两边，再平分剩余空间
   stetch	设置子项元素高度平分父元素高度

6. flex-flow

   flex-flow属性是flex-direction和flex-wrap竖向的复合属性

子项常见属性

• flex：子项占的分数
• align-self：控制子项自己侧轴的排列方式
• order：属性定义子项的排列方式（前后顺序）

1. flex属性

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

参考课程