CSS 笔记（十）：布局 —— 伸缩

原创

已于 2022-09-06 15:36:48 修改 · 1.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

于 2022-07-30 17:05:38 首次发布

CSS 笔记（十）：布局 —— 伸缩

基本概念

如果元素设置了 display: flex; 那么此容器称为伸缩容器，它的子元素称为伸缩项，在容器的水平方向存在一条主轴，主轴的起点默认在容器的最左侧，主轴的终点默认在容器的最右侧，在容器的垂直方向存在一条侧轴，侧轴的起点默认在容器的最顶部，侧轴的终点默认在容器的最底部，伸缩项默认以主轴和侧轴方向水平和垂直排版

主轴方向

默认情况下，伸缩容器的主轴为水平方向，主轴方向为从左至右，而所有伸缩向默认从主轴的起点开始排版

属性

flex-direction

修改主轴的起点位置

值

row（默认）
row-reverse
column
column-reverse

row 为默认取值，即从左至右，而 column 可将主轴方向修改为从上至下，具有 reverse 的值表示与相应方向相反的方向，例如，row-reverse 表示从右至左，另外，伸缩容器的主轴与侧轴总是正交的，如果主轴为水平方向，那么侧轴为垂直方向，如果主轴为垂直方向，那么侧轴为水平方向

对齐方式

主轴

属性

justify-content

修改伸缩项在伸缩容器中主轴方向上的对齐方式，写在伸缩容器中

值

flex-start（默认）
flex-end
center
space-between
space-around

当伸缩项在伸缩容器中排版之后，默认在主轴起点左对齐，而 flex-end 表示在主轴终点右对齐、center 表示在主轴居中对齐、space-between（两端对齐）表示将容器中未被伸缩项占用的空间平均置于各容器之间，保证最左边和最右边的元素对齐于伸缩容器两侧、space-around（环绕对齐）表示将容器中未被占用的空间平局置于各容器两侧

侧轴

属性

align-items

修改所有伸缩项在伸缩容器中侧轴方向上的对齐方式，写在伸缩容器中

值

flex-start（默认）
flex-end
center
baseline
stretch

值 flex-start、flex-end、center 与主轴对齐方式中相同值的含义相同，区别在于方向为侧轴方向，而 baseline 表示所有伸缩项在侧轴方向上以基线为准对齐、stretch 表示将所有伸缩项的高度拉伸为侧轴高度，但是伸缩项不能设置高度，否则失效

属性

align-self

修改某个伸缩项在伸缩容器中侧轴方向上的对齐方式，写在某个伸缩项中

值

flex-start（默认）
flex-end
center
baseline
stretch

值含义与属性 align-items 相同，区别在于作用范围不同，align-self 为伸缩容器中的某个伸缩项，而 align-items 为伸缩容器中的所有伸缩项

换行

默认情况下，如果在伸缩容器中的一行不能容纳所有伸缩项时，不是换行，而是所有伸缩项会被等比拉伸至可以容纳到一行当中

属性

flex-wrap

设置所有伸缩项不能容纳在一行时，是否换行

值

nowrap（默认）
wrap
wrap-reverse

默认情况下值为 nowrap，表示不换行，wrap 表示换行，在换行之后，行与行之间会存在间隙，与换行后的对齐方式有关，而 wrap-reverse 表示换行后以行为单位翻转

属性

align-content

设置换行后，所有伸缩项在伸缩容器中的对齐方式

值

flex-start
flex-end
center
space-between
space-around
stretch（默认）

值含义与 justify-content 基本相同，区别在于对齐方向为侧轴方向，flex-start、flex-end、center 将换行后的伸缩项作为一个单位，以侧轴起点、居中和终点对齐，而 space-between（两端对齐）、space-around（环绕对齐）、stretch（拉伸对齐）将换行后的每一行作为一个单位，将未被伸缩项占用的伸缩容器平局分布于每一个单位中，其中 stretch 与 align-items 中的不同，此处将空白区域平局分布于每一行的一侧，保证在拉伸之后所有行可以填充侧轴