伸缩盒布局
1 伸缩容器和伸缩项目
伸缩容器: 一个元素设置 CSS 属性 display:flex
或者 display: inline-flex
,该元素就变为伸缩容器。
伸缩项目: 伸缩容器的子元素就会变为伸缩项目。
- 伸缩项目会水平排列,可以完美的设置宽高以及内外边距,不存在外边距塌陷合并,并且具有伸缩性。
- 只有伸缩容器的子元素才是伸缩项目,子元素的子元素以及其他后代不是。
- 伸缩项目也可以作为它的子元素的伸缩容器。
2 设置主轴方向和换行方式
主轴: 伸缩项目会沿着主轴排列,主轴的默认是水平的且方向是从左到右。
侧轴: 与主轴垂直的就是侧轴,侧轴默认是垂直的且从上到下。
① 设置主轴方向
flex-direction 属性可以设置主轴方向:
值:
row 默认值,水平且从左到右
row-reverse 水平从右到左
column 垂直从上到下
column-reverse 垂直从下到上
② 设置换行方式
flex-wrap 属性可以设置伸缩项目的换行方式:
值:
nowrap 默认值,强制不换行
wrap 自动换行
wrap-reverse 换行且反转行的排列属性
③ 同时设置主轴方向和换行方式
flex-flow 属性可以同时设置主轴方向和换行方式,该属性是 flex-direction 和 flex-wrap 的复合属性,值没有数量和顺序要求。
3 设置伸缩项目在主轴上的对齐方式
justify-content 属性可以设置伸缩项目在主轴上的对齐方式:
值:
flex-start 默认值,靠主轴起始位置对齐
flex-end 靠主轴结束位置对齐
center 居中对齐
space-between 伸缩项目在主轴上均匀分布,两端没有间隙,中间有间隙。
space-around 伸缩项目在主轴上均匀分布,两端的间隙是直接间隙的一半。
space-evenly 伸缩项目在主轴上均匀分布,两端的间隙与中间的间隙一样。
4设置伸缩项目在侧轴上的对齐方式
① 一条主轴线(伸缩项目在主轴上不换行)
align-items 属性可以设置伸缩项目在侧轴上的对齐方式,主要用于只有一条主轴线的情况。
值:
stretch 默认值,伸缩项目在侧轴上拉伸。
flex-start 靠侧轴开始位置对齐
flex-end 靠侧轴结束位置对齐
center 居中对齐
baseline 文字基线对齐
② 多条主轴线 (伸缩项目在主轴上发生换行)
align-content 属性可以设置伸缩项目在侧轴上的对齐方式,只能用于多条主轴的情况(伸缩项目发生了换行)
值:
stretch 默认值,伸缩项目在侧轴上拉伸。
flex-start 靠侧轴开始位置对齐
flex-end 靠侧轴结束位置对齐
center 居中对齐
space-between 在侧轴方向上,两端没有间隙,中间有间隙。
space-around 在侧轴方向上,两端的空隙是中间空隙的一半。
space-enenly 在侧轴方向上,两端的空隙与中间空隙一样。
注意:
- align-items 在一条主轴或多条主轴设置对齐方式都会生效,但是我们只有在一条主轴的情况下使用该属性。
- align-content 只有多条主轴线的情况下才生效。
5 伸缩项目的伸缩性
① 伸缩项目在主轴上的基准长度 flex-basis
需要设置一个长度作为值,概属性设置的是伸缩项目在主轴方向上的长度。 如果没有设置该属性,伸缩项目在主轴上的长度就是 width的值 或者 height的值。
② 扩展比率 flex-grow
伸缩项目发生扩展的前提: 伸缩容器在主轴方向上有富余的空间。
伸缩项目默认的扩展比率是 0。
伸缩项目在扩展的时候,按照各自的扩展比率瓜分伸缩容器的富余空间。
③ 收缩比率 flex-shrink
伸缩项目发生收缩的前提:伸缩容器在主轴方向上的长度不够(小于伸缩项目在主轴上的长度的和)
伸缩项目默认的收缩比率是 1。
伸缩项目在收缩的时候,每个伸缩项目要补一部分伸缩容器的亏空,补多少既考虑自己原本的长度也考虑收缩比率。
④ flex 复合属性
flex: grow shrink basis;
复合数的简写:
flex: 1; /* flex: 1 1 0 */
flex: auto; /* flex: 1 1 auto */
flex: none; /* flex: 0 0 auto*/
flex: 0 auto; /* flex: 0 1 auto */
6 伸缩项目排序
给伸缩项目设置属性 order 可以调整伸缩项目排列属性。 order 属性的值是数字,值越小排序越靠前,可以是负数。
7 单独设置伸缩项目在侧轴上的对齐方式
给伸缩项目设置属性 align-self,可以单独设置该伸缩项目在侧轴上的对齐方式,属性的值与 align-items 一样。
8 伸缩盒相关 CSS 属性总结
① 设置给伸缩容器的属性
CSS 属性名 | 含义 | 值 |
---|---|---|
display | 设置显示模式 | flex: 设置为伸缩容器 inline-flex:设置为行内的伸缩容器 |
flex-direction | 设置主轴方向 | row:默认值,水平从左到右 row-reverse:水平从右到左 column:垂直从上到下 column-reverse:垂直从下到上 |
flex-wrap | 设置换行方式 | nowrap:默认值,不换行 wrap:自动换行 wrap-reverse:自动换行且反转排列 |
flex-flow | 复合属性 复合 主轴方向和换行方式 | |
justify-content | 伸缩项目在主轴上的对齐方式 | flex-start:靠主轴起始位置 flex-end:靠主轴结束位置 center:居中 space-between: 两端没有间隙,中间有间隙 space-around:两端的间隙是中间间隙的一半 space-evenly:两端间隙与中间间隙一样 |
align-items | 伸缩项目在侧轴上的对齐方式 一条主轴线 | stretch:默认值,拉伸 flex-start:靠侧轴其实位置 flex-end:靠侧轴结束位置 center:居中 baseline:文字基线对齐. |
align-content | 伸缩项目在侧轴上的对齐方式 多条主轴线 | stretch:默认值,拉伸 flex-start:靠侧轴其实位置 flex-end:靠侧轴结束位置 center:居中 space-between: 两端没有间隙,中间有间隙 space-around:两端的间隙是中间间隙的一半 space-evenly:两端间隙与中间间隙一样 |
② 设置给伸缩项目的属性
CSS 属性名 | 含义 | 值 |
---|---|---|
flex-basis | 设置伸缩项目在主轴上的长度 | 长度 默认值是 auto |
flex-grow | 设置扩展比率 | 数字,默认是 0. |
flex-shrink | 设置收缩比例 | 数字,默认是 1 |
flex | 复合属性,复合 basis、grow、shrink | |
order | 设置伸缩项目排序顺序 | 数字 |
align-self | 单独设置伸缩项目在侧轴上对齐方式 | auto: 默认值 stretch:拉伸 flex-start:靠侧轴其实位置 flex-end:靠侧轴结束位置 center:居中 baseline:文字基线对齐. |