css3复习P7伸缩盒

基本介绍

伸缩盒布局也叫弹性盒布局，是一种新的布局方式，可以简便、完整、响应式地实现各种页面布局；flex布局可以使元素具有弹性，让元素可以跟随页面的大小改变而改变；

伸缩盒布局的组成部分

主轴

弹性元素的排列方向称为主轴

交叉轴

与主轴垂直方向的称为侧轴

弹性容器

要使用弹性盒布局，必须先把一个元素设置为弹性容器；

弹性容器的属性

flex-direction

指定容器中弹性元素的排列方式；
可选值：
row：默认值，弹性元素在弹性容器中水平排列（从左往右），此时主轴：左->右，交叉轴：上->下
row-reverse：弹性元素在弹性容器中反向水平排列（从右往左），此时主轴：右->左，交叉轴：下->上
column：弹性元素在弹性容器中垂直排列（从上往下），此时主轴：上->下，交叉轴：左->右
column-reverse：弹性元素在弹性容器中反向垂直排列（从下往上），此时主轴：下->上，交叉轴：右->左

flex-wrap

设置弹性元素是否在弹性容器中自动换行
可选值：
nowrap：默认值，元素不会自动换行；
wrap：元素沿着交叉轴方向自动换行
wrap-reverse：元素沿着辅轴反方向换行

flex-content

如何分配主轴上的空白空间（主轴上的元素如何分配）
可选值：
flex-start：元素沿着主轴起边排列；
flex-end：元素沿着主轴终边排列；
center：元素剧中排列；
space-around：空白分布到元素两侧；
space-between：空白均匀分布到元素间，最左最右的元素都紧贴容器
space-evenly：空白分布到元素的单侧，元素间的间距以及最左与最右的元素与容器的间距都一样；

align-items

如何分配交叉轴上的空白空间；
可选值：
stretch：默认值，如果项目没设置高度，或高度为auto，则占满整个容器；
flex-start：元素沿着交叉轴轴起边排列；
flex-end：元素沿着交叉轴终边排列；
center：居中对齐；
baseline：基线对齐；

align-content

控制多行弹性元素的对齐方式，如果弹性元素只有一行或者一列则不会起作用；
可选值：
stretch：默认值，如果项目没设置高度，或高度为auto，则占满整个容器；
flex-start ：元素沿着主轴起边排列；
flex-end：元素沿着主轴终边排列；
center：居中对齐；
space-around：项目之间间距为上下两端项目与容器间距两倍；
space-between：上下两侧项目紧贴容器；
space-evenly：项目之间间距与项目到容器之间间距相等；

弹性元素

弹性容器的直接子元素才是弹性元素（弹性项目）
弹性元素也可以嵌套设置为弹性容器；

弹性元素的属性

order

用于决定项目排列顺序
可选值：数值，0为默认值；数值越小，弹性元素排列越向前；

flex-grow

指定弹性元素的伸展系数
当父元素有多空间时，子元素会按照比例进行分配；
默认值：0；

flex-shrink

指定弹性元素的收缩系数
当父元素的空间不足以容纳所有的子元素时，子元素会按照比例进行分配；
默认值：1，会自动等比例伸缩；

flow-basis

指定的是弹性元素在主轴上的基础长度；
如果主轴是横向的，指定的就是元素的宽；
如果主轴是纵向的，指定的就是元素的高；
默认：auto：参考元素自身的宽度和高度；

flex

可以设置弹性元素的伸展系数、收缩系数、基础长度；
默认值：0 ，1 ，auto

align-self

表示继承父容器的align-items属性；
用于让个别项目拥有与其他弹性元素不同的对齐方式；
可选值与弹性容器中的align-items属性的值一样；