flex布局
前言：由于面试中经常被问到flex布局，今天就仔细学习一下
1. flex布局原理
就是通过给父盒子添加flex属性来控制子盒子的位置和排列方式
2. flex布局父项常见属性
2.1 flex-direction
默认主轴是从左到右
2.2 justify-content（设置主轴居中）
以下例子以默认主轴为准哦！
center（主轴居中对齐）
space-around
space-between
2.3 flex-wrap
- 不换行：元素装不开的话会自动缩小子元素宽度，
- 换行：另起一行摆放子元素
2.4 align-items（设置侧轴居中）
center（垂直居中）重点
2.5 align-content（多行，单行无效）
center
2.6 flex-flow（flex-direction和flex-wrap复合属性）
3. align-content和align-items区别
4. flex布局子项常见属性
4.1 flex属性（重点）
定义子项目分配剩余空间，用flex来表示占多少份数
举个例子，定义3个span。第一，第三个span各占1份，第二个span占2份。
效果如图，还可以自适应哦：
真的很方便布局啊有木有！爱了爱了
4.2 align-self属性（感觉不咋实用，就不详细叙说了 233333）
以上图片来自黑马教程