Flex布局(dispaly:flex)上

一、flex的优势和特点

1. 浏览器浏览器提倡的布局模型，页面渲染性能高
2. 布局简单、方便
3. 避免浮动脱标的问题
4. 兼容性较高（不兼容低版本浏览器）

二、组成部分

1. 弹性容器（父级， 添加display:flex的盒子）
2. 弹性盒子（子级）
3. 主轴（默认水平）
4. 侧轴（默认垂直）

三、主侧轴对齐方式

主轴(justify-content)

1. justify-content：center   居中
2. justify-content：space-between   间距出现在弹性盒子之间 盒子两边要靠边 中间平均分配 
3.  justify-content：space-evenly      父子级间距都相同 盒子平均分 比例1:1
4.  justify-content：space-around     间距出现在弹性盒子两侧 比例1:2

侧轴 (align-items)

1. align-items: stretch   默认值  盒子没有高度时自动沾满父盒子 拉伸
2. align-items: flex-start  从上边 从起点开始排列
3. align-items: flex-end 从下边 从终点开始排列
4. align-items: center 侧轴居中,垂直居中

四、伸缩比

伸缩比:占的是父盒子的宽度,把他分成了等分

flex: 整数数字;