图解CSS3弹性盒子属性

弹性盒子属性

设置弹性盒子：display

• flex：块级的弹性盒子
• inline-flex：行级的弹性盒子
• -webkit-flex：苹果和谷歌的兼容性

搞清楚子元素和父元素

设置在父元素上的值

flex-direction：子元素在父容器中的位置（默认row）

1. row：横向从左到右排列(左对齐)，默认排列
2. row-reverse：横向右对齐元素反转
3. column：纵向排列
4. column-reverse：反转纵向排列

主轴和交叉轴（侧轴）

主轴为flex-direction属性对其的方式的方向
交叉轴为主轴的垂直方向

比如：flex-direction: row;
主轴为水平向右
交叉轴为垂直向下

回到顶部 目录

flex-wrap：子元素换行方式（默认nowrap）

1. nowrap：默认， 弹性容器为单行
2. wrap：弹性容器为多行
3. wrap-reverse：反转 wrap 排列

flex-flow：flex-direction 和 flex-wrap复合写法

flex-flow:row nowrap;
flex-flow:column wrap-reverse;

align-items：基于交叉轴对齐（单行）（默认stretch）

1. flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
2. flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
3. center：弹性盒子元素在该行的侧轴（纵轴）上居中放置
4. baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐
5. stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制

回到顶部 目录

align-content：基于交叉轴对齐（多行）（默认stretch）

1. stretch：默认。各行将会伸展以占用剩余的空间。
2. flex-start：各行向弹性盒容器的起始位置堆叠。
3. flex-end：各行向弹性盒容器的结束位置堆叠。
4. center：各行向弹性盒容器的中间位置堆叠。
5. space-between：各行在弹性盒容器中平均分布。
6. space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

justify-content：基于主轴对齐（默认flex-start）

1. flex-start：弹性项目向行头紧挨着填充
2. lex-end：弹性项目向行尾紧挨着填充
3. center：弹性项目居中紧挨着填充
4. space-between：弹性项目平均分布在该行上
5. space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间

回到顶部 目录

设置在子元素上的属性

flex-grow：拉伸(默认0)

自身收缩数/收缩总和*剩余空间

flex-shrink：收缩(默认1)

(自身宽度*自身收缩数)/(sum每个(宽度*收缩数))*超出的空间

计算：
A被移除溢出量：(200*1/(200*1+200*1+200*3))*200，即约等于40px
B被移除溢出量：(200*1/(200*1+200*1+200*3))*200，即约等于40px
C被移除溢出量：(200*3/(200*1+200*1+200*3))*200，即约等于120px
A,B,C的实际宽度分别为：200-40=160px, 200-40=160px, 200-120=80px

回到顶部 目录

flex-basis：宽度(默认0)

• px：像素值
• %：百分值
• auto（默认）：无特定宽度值，取决于其它属性值
• content：基于内容自动计算宽度

flex：复合写法

flex-grow|flex-shrink|flex-basis
flex:1 1 300px;

order(默认0)

适用于：flex子项和flex容器中的绝对定位子元素
用整数值来定义排列顺序，数值小的排在前面。可以为负值

align-self：子元素自身在侧轴（纵轴）方向上的对齐方式（默认auto）

1. auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
2. flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
3. flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
4. center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
5. baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
6. stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
   

回到顶部 目录