弹性布局：flex布局详述

flex 布局：

Flex布局/弹性布局：
Ø 是一种浏览器提倡的布局模型
Ø 布局网页更简单、灵活
Ø 避免浮动脱标的问题

 作用：

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

设置方式：

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

组成部分
Ø 弹性容器
Ø 弹性盒子
Ø 主轴
Ø 侧轴/ 交叉轴

在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: 数值(整数)
  1. 所有的弹性盒子都添加相同的flex值，均分弹性容器的宽度；如果flex值不同，根据比例进行分配；
  2. 其他的盒子宽度固定，只有一个盒子设置了flex:1 --- 占据父元素剩余的宽度。

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