移动端常见布局总结（二）——flex布局（弹性布局）

二、flex布局

1.1 传统布局和flex弹性布局

​ 传统布局

• 兼容性好

• 布局繁琐

• 局限性，不能在移动端很好的布局

  flex弹性布局

• 操作方便，布局极为简单，移动端应用广泛。

• PC端浏览器支持情况较差。

• IE11或更低版本，不支持或仅部分支持。

建议：

1. 如果是PC端，则选择传统布局
2. 如果是移动端，则使用flex弹性布局

1.2 flex布局原理

• 任何一个容器都可以使用flex布局
• 灵活性大
• 当父盒子设为flex布局后，子元素的float、clear和vertical-align都将失效
• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

1.3 flex布局父级常见属性

以下6个属性是在父盒子上面设置：

属性	描述
flex-direction	设置主轴方向
jutify-content	主轴上的子元素排列方式
flex-wrap	子元素是否换行
align-content	侧轴上的子元素排列方式（多行）
align-items	侧轴上的子元素排列方式（单行）
flex-flow	复合属性， 相当于同时设置了 flex-wrap和flex-direction

1.3.1 flex-direction 主轴和侧轴

在flex布局中，分为主轴和侧轴两个方向，也叫：行和列，X轴和Y轴

(如下图所示)。

• 默认主轴方向为X轴方向，水平向右
• 默认侧轴方向为Y轴方向，水平向下
  

1.3.2 flex-direction 属性值

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

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

属性值	描述
row	默认值。从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

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

定义项目在主轴上的对齐方式。

注意：使用这个属性，一定要确认主轴是哪一个。

属性值	描述
flex-start	默认值，从头部开始，如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐
space-around	平分剩余的空间
space-between	先两边贴边，再平分剩余空间（！important）

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

在flex布局中，如果子元素装不下，那么就一直在同行上显示。这时就需要一个属性，flex-wrap。

属性值	描述
nowrap	不换行
wrap	换行

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

在侧轴（默认是Y轴）的排列方式。适用于单行。

属性值	描述
center	使元素在侧轴上居中对齐
stretch
flex-start
flex-end

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

在侧轴（默认是Y轴）的排列方式。适用于多行，单行无效。

属性值	描述
flex-start	默认值，从侧轴的头部开始排列
flex-end	从尾部开始排列
center	在侧轴居中对齐
space-around	平分剩余的空间
space-between	先两边贴边，再平分剩余空间

注： align-items 和 align-content 区别

• align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸
• align-content 适用于换行（多行）情况下（单行效果如下），可以设置上对齐、下对齐、居中拉伸以及平均分配剩余空间等属性值。
• 总结：单行找 align-items ，多行找 align-content。

1.3.7 flex-flow 的复合属性

flex-flow：flex-direction flex-wrap

总结：

1. 先设置display：flex;
2. 第二步进行设置主轴方向，justify-direction：row/column;
3. 第三步设置看元素是否换行，使用 flex-wrap
4. 第四步看排列方式。
   • 主轴排列方式使用 justify-content 。
   • 侧轴排列方式则看是否为单行还是多行。单行排列使用 align-items，多行排列使用 align-content

1.4 flex布局子项常见属性

属性	描述
flex（! important）	子项目占的分数
align-self	控制子项目自己在侧轴的排列方式
order	定义子项的排列顺序（前后顺序）

1.4.1 flex属性

看子项目分配的剩余空间。

`flex: flex-grow flex-shrink flex-basis`

/*
flex-grow: 默认为0，如果存在剩余的空间，项目也不会放大
flex-shrink：默认比例1，如果空间不足，项目缩小
flex-basis：相当于width和hight属性一样的值，将项目占据固定的空间。
*/ 

语法：

div {
     
	flex: number;/*(没有单位) default为0*/
}

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

语法：

div {
     
    /*规定的子项在侧轴上的排列方式，可以覆盖 align-items ，默认是auto*/
    align-self: felx-end;
}

1.4.3 order属性定义项目的排列顺序

语法：

div {
     
    /*默认是0，这个元素向前移动一个 */
    order: -1;
}

1.5 背景线性渐变

语法：

background: linear-gradient(起始方向，color1,color2, ...)
background: -webkit-linear-gradient(起始方向，color1,color2, ...)

注意：

• 线性渐变必需添加浏览器私有前缀
• 起始方向可以是：方位名词、度数，如果省略默认就是top