Flex布局
- Flex 是 Flexible Box 的缩写，意为"弹性布局"；
作用
- 是浏览器提倡的布局模型，布局简单，灵活，可以避免浮动布局脱标的问题；
- Flex布局非常适合结构化布局
设置方式
- 给父元素添加 display: flex，即可开启父元素的flex布局, 其内部的子元素可以自动的挤压或拉伸；
- 任何一个盒子都可以开启弹性布局；
组成部分
- 弹性容器 (父元素)；
- 弹性盒子 (子元素)；
- 主轴；
- 侧轴 / 交叉轴；
主轴对齐方式
- justify-content: 调节元素在主轴的对齐方式；
语法：
属性名: justify-content
取值：
侧轴对齐方式
- align-items： 调节元素在侧轴的对齐方式
语法：
属性名: align-items（添加到弹性容器）
取值：
侧轴扩展
- align-self： 控制单个弹性盒子在侧轴的对齐方式；
语法：
属性名: align-self（添加到弹性盒子）；- 属性值: 与align-items的取值相同：
- flex-start (起点)
- center (居中)
- flex-end (终点)
伸缩比
- 使用flex属性修改弹性盒子伸缩比，使用flex的伸缩比 可快速获取父容器剩余尺寸。
使用方式：
- 属性名: flex
- 属性值: 数值(整数)
- 示 例:
flex:1 - 父盒子里的flex值总数代表分为多少份，每个项目的flex代表占几份。
flex注意点
- 块级元素作为弹性盒子时:
- 宽度由默认的父级100%, 变成由自身内容撑开；
- 行内元素作为弹性盒子时:
- 由默认的不能直接设置大小, 变为可以直接设置大小并生效；
- 行内元素作为弹性容器时:
- 由默认的不能直接设置大小, 变为可以直接设置大小并生效
flex修改主轴方向
- flex-direction： 修改主轴方向, 实现更多需求下的结构化布局
语法：
属性名: flex-direction- direction[方向]
取值：
弹性盒子换行
- 实现弹性盒子多行排列效果
语法：
- 弹性盒子允许换行 :
flex-wrap: wrap; - wrap[换行]
- 换行以后， 多了一个行与行之间的对齐方式；
行之间的对齐方式align-content
- align-content：调整行对齐方式；
取值：
- 取值与justify-content（主轴对齐方式） 基本相同；
