弹性盒子页面布局

页面布局

1. 弹性盒子布局

配套属性:

1. flex-direction:作用对象：弹性盒子 设置弹性盒子内子元素的排列方向 其中有：row(横向，默认) column（竖着） row-reverse（反向横着） column-reverse(反向竖着)
2. flex-wrap：作用对象：弹性盒子 设置弹性盒子内的子元素是否换行，其中有：nowrap（不换行，默认） wrap（换行）
3. order：作用对象：弹性盒子内的子元素 设置子元素的排列方式，越小越靠前
4. flex：作用对象：弹性盒子内的子元素 （复合属性）flex-grow（拉伸因子）flex-shrink（收缩因子） flex-basis（基准宽度）
5. justify-content：作用对象：弹性盒子 设置弹性盒子内子元素在排列方向上的分布方式 其中有：flex-start（弹性的开端） flex-end(弹性的后端) space-between（空白放在中间）space-around（空白在周围）
6. align-items：作用对象：弹性盒子 设置弹性盒子内子元素在排列方向上垂直方向的对齐方式， flex-start（弹性开端） flex-end（弹性的尾部）center（居中）baseline（弹性的开端，内容的底部为对齐线）（单行用）
7. align-content：作用对象：弹性盒子 设置弹性盒子内行的对齐方式 其中有：flex-start（弹性的开端） flex-end(弹性的后端) space-between（空白放在中间）space-around（空白在周围）（与align-items的区别在于，这个更适用于多行）（多行用）