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