【Flex】Flex布局，移动端最常用的布局。

目录

一、Flex简介

二、主轴的对齐方式

三、侧轴对齐方式

四、Flex伸缩比

五、Flex布局

---

一、Flex简介

        是一种浏览器提倡的布局模型；布局网页更简单、灵活；避免浮动脱标的问题。

作用：

        基于Flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。

        Flex布局非常适合结构化布局

设置方式

        父元素添加display:flex，子元素可以自动的挤压或拉伸。

组成部分：

        弹性容器

        弹性盒子

        主轴（默认水平）

        侧轴

二、主轴的对齐方式

        修改主轴对齐方式属性：justify-content

属性值	作用
flex-start	默认值，起点开始依次排序
flex-end	终点开始依次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列，孩子盒子两边加间距
space-between	弹性盒子沿主轴均匀排列，两边靠，只有孩子盒子有间距
space-evenly	弹性盒子沿主轴均匀排列，所有间距都相等

三、侧轴对齐方式

        修改侧轴对齐方式属性：

        align-items（添加到弹性容器）

        align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	终点开始依次排列
center	沿侧轴居中排列
stretch	默认值，弹性盒子沿着主轴线被拉伸至铺满容器

四、Flex伸缩比

        使用flex属性修改弹性盒子伸缩比

属性

        flex：值

取值分类

        数值（正数）

注意：只占用父盒子剩余尺寸

五、Flex布局

1、主轴方向

        使用flex-direction改变元素排列方向

        主轴默认是水平方向、侧轴默认是垂直方向

属性值	作用
row	行，水平（默认值）
column	列，垂直
row-revarse	行，从右向左
column-reverse	列，从下向上

2、弹性盒子换行

目标：使用flex-wrap实现弹性盒子多行排列效果

调整行对齐方式：align-content

        取值与justify-content基本相同