一、Flex布局
Flex布局模型中，弹性子盒子默认内容沿着主轴【水平方向】排列
当父元素设置了弹性盒子模型后，所有的子元素，会在强制一行上显示【水平方向-从左到右】
主轴默认是【水平方向】, 侧轴默认是【垂直方向】
使用flex-direction 属性 【修改主轴方向】改变子元素排列方向
①flex-direction：row 行, 水平(默认值) 主轴从左到右方向 ，侧轴从上到下方向 ②flex-direction：column 列, 垂直 主轴从上到下方向 ，侧轴从左到右方向
③flex-direction：row-reverse 行, 从右向左 ④flex-direction：column-reverse 列, 从下向上
img 和 p标签
传统做法：tac 和 外边距
flex布局下做法： 父元素 设置
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
二、弹性盒子换行
1、默认情况下：当父元素设置了弹性盒子模型后， 所有的子元素，会在强制一行上显示
- 【①当所有子元素宽度加起来不超过父盒子宽度时，则按子元素的具体宽度排列】
- 【②当所有子元素宽度加起来超过父盒子宽度时，子元素会互相挤压，此时子元素则不是按具体宽度排列】
- 【③即使子元素盒子宽度远远超出父元素宽度，溢出了，也不会主动换行】
- flex-wrap: nowrap 默认值 、不换行
那么如何让子元素换行显示：
让子元素换行的前提下是子元素宽度超出大盒子，设置 flex-wrap: wrap 才有效果
- 给父元素设置： flex-wrap: wrap; 此时子元素就会按照具体的宽度排列，超出部分就会换行
如何取消【默认拉伸】所导致的空白位置： 给父元素设置 ：align-content 属性
flex-wrap: wrap; 与 align-content 是连体婴儿
三、实战演练
1、先静态分析--版心【多列布局】
2、仔细留意源码习惯、版心类名、base.css的基础样式，css3模型等是否添加
3、弹性盒子不会引发【类似浮动所带来的负面影响】，不会影响大盒子外的其它元素布局
4、对于特殊盒子时，后期可能会增删的，先不要把高度定死，可以采用： min-height：500px 【数值自定义，当前盒子最小高度为 500px，【下限】，当文本超出500px时，由超出的内容撑开
max-height：500px 【盒子高度上限 500px】
5、头像可以用 avatar 作为类名
