CSS3弹性盒子解读

CSS3弹性盒子解读

弹性盒子是 CSS3 的一种新的布局模式，这种布局方式可以适应不同的屏幕大小，在不同的移动设备上也能有合理的布局。弹性盒子布局可以有效对一个容器内的子元素进行排列、对齐和分配空白空间。
通过设置dislpay属性为flex定义为弹性容器，弹性容器内包含一个或多个弹性子元素。 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
flex-direction
此属性指定了弹性子元素在父容器中的位置
Flex-direction:row;横向从左到右排列（左对齐），默认的排列方式
Flex-direction:row-reverse;横向排列的反向（右对齐，从后往前排，最后一项排在最前面
Flex-direction:column;纵向排列
Flex-direction:column-reverse;纵向排列的反向，从后往前排，最后一项在最上面
以下分别为row，row-reverse，column，column-reverse的排列效果




justify-content
此属性只能应用在弹性容器上（不可作用于弹性子元素上），把弹性项沿着弹性容器的主轴线对齐
Justify-content:flex-start;默认值，从行头依次紧挨排列
Justify-content:flex-end;从行尾依次紧挨排列
Justify-content:center;居于弹性容器的最中心，紧挨着排列（如果容器大小不够，那么左右两边同时溢出相同大小的内容）
Justify-content:space-between;均匀地分布在容器内，并同时占据左右两端（如果容器大小不够，则效果等同于flex-start）
Justify-content:space-around;均匀地分布在容器内，左右两端同时留空相同的大小，此大小为各子元素距离的一半（如果容器大小不够，则效果等同于center）

align-items
此属性只能应用在弹性容器上（不可作用于弹性子元素上），把弹性项沿着弹性容器的侧轴线对齐
align-items:flex-start;默认值，从行头依次紧挨排列（竖着的侧轴方向）
align-items:flex-end;从行尾依次紧挨排列（竖着的侧轴方向）
align-items:center;居于弹性容器的最中心，紧挨着排列（如果容器大小不够，那么左右两边同时溢出相同大小的内容）（竖着的侧轴方向）
align-items:baseline;若弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效。其它情况下，该值将参与基线对齐。
align-items:stretch;如果指定侧轴大小的属性值为auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照min/max-width/height属性的限制。
以下分别为flex-start,flex-end,center,baseline,stretch的效果





flex-wrap
此属性只能应用在弹性容器上（不可作用于弹性子元素上），指定弹性子元素的换行方式
flex-wrap:nowrap;默认值，意为不换行，可能溢出容器
flex-wrap:wrap;增加换行效果使容器为多行，溢出的部分会被放到新行
flex-wrap:wrap-reverse;增加换行效果使容器为多行，溢出的部分会被放到新行（方向相反）、
以下分别为nowrap,wrap,wrap-reverse的效果



align-content
此属性只能应用在弹性容器上（不可作用于弹性子元素上），用于修改flex-wrap的行为，设置各个行的对齐
align-content:stretch;默认值，各行会伸展以占用剩余空间
align-content:flex-start;各行向弹性盒容器的起始位置堆叠
align-content:flex-end;各行向弹性盒容器的结束位置堆叠
align-content:center;各行向弹性盒容器的中间位置堆叠
align-content:space-between;各行在弹性盒容器中平均分布。
align-content:space-around;各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半
以下分别为stretch，flex-start,flex-end,center,space-between,space-around的效果






order
此属性只能应用在弹性子元素上（不可作用于弹性容器上），用来设置子元素的排列顺序，数字小的在前面
align-self
此属性只能应用在弹性子元素上（不可作用于弹性容器上），用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式
align-self:auto;若有父元素，则为父元素的align0items值。弱没有父元素，则值为stretch
align-self:flex-start;弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
align-self:flex-end;弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
align-self:center;弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）
align-self:baseline;如弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效。其它情况下，该值将参与基线对齐。
align-self:stretch;如果指定侧轴大小的属性值为auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照min/max-width/height属性的限制
以下是align-self不同值对应的效果

flex
此属性只能应用在弹性子元素上（不可作用于弹性容器上），指定子元素分配空间的方式，是 flex-grow，flex-shrink， flex-basis的复合写法
auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto
none：计算值为 0 0 auto
inherit：从父元素继承
flex-grow ：定义弹性盒子元素的扩展比率，想看到扩展的效果必须有空隙。0是默认值不去扩展，1是去扩展把空白区域全部填满。子元素会按照设置的比例值来分配空隙，如果比例值总和小于1，那么会有空隙，如果比例值总和大于等于1，那么就没有空隙
flex-shrink ：定义弹性盒子元素的收缩比率。1是默认值正常缩放，0是不收缩，0.5是收缩小一些，2是收缩大一些
flex-basis ：定义弹性盒子元素的默认基准值，是flex-shrink/flex-grow的一个比例值