Flex 弹性布局笔记

这几天学了一些 flex 的知识,做了以下笔记。

伸缩容器属性

display: flex | inline-flex

指定元素是否为伸缩元素

  • flex: 块级伸缩元素
  • inline-flex: 行内级伸缩元素

flex-direction: row | row-reverse | column | column-reverse

指定主轴方向

  • row (default): 水平方向伸缩
  • column: 垂直方向伸缩
  • row-reverse: 水平反方向收缩
  • column: 垂直反方向收缩

flex-wrap: nowrap | wrap | wrap-reverse

指定主轴空间不足时是否换行

  • nowrap (default): 不换行,内层元素会弹性伸缩
  • wrap: 换行
  • wrap-reverse: 换行,但是换行方向和主轴相反

换行时父级元素大小不变,被换行的元素会出现在父级元素之外


flex-flow: flex-direction flex-wrap

这个是 flex-direction 和 flex-wrap 的简便写法,可以写到一起,比如:flex-flow: row nowrap,这个也是默认值。


justify-content: flex-start | flex-end | center | space-between | space-around

定义伸缩项目沿主轴线对齐方式

  • flex-start (default): 伸缩方向向主轴线起始方向对齐
  • flex-end: 伸缩方向向主轴线结束方向对齐
  • center: 伸缩项目向中间对齐
  • space-between: 伸缩项目均匀分布,主轴左右不留空间
  • space-around: 伸缩项目均匀分布,主轴左右各留半个间隔空间

align-items: flex-start | flex-end | center | baseline | stretch

定义伸缩项目在交叉轴的对齐方式

  • flex-start: 伸缩项目沿交叉轴起始方向对齐
  • flex-end: 伸缩项目沿交叉轴结束方向对齐
  • center: 伸缩项目向中间对齐
  • baseline: 伸缩项目沿基线对齐
  • stretch (default): 伸缩项目沿交叉轴方向拉伸填充整个容器

align-content: flex-start | flex-end | center | space-between | space-around | stretch

定义伸缩项目出现换行后在交叉轴的对齐方式

  • flex-start: 多行伸缩项目沿交叉轴起始方向对齐
  • flex-end: 伸缩项目沿交叉轴结束方向对齐
  • center: 伸缩项目向中间对齐
  • space-between: 多行伸缩项目均匀分布,交叉轴左右不留空间
  • space-around: 多行伸缩项目均匀分布,交叉轴左右各留半个间隔空间
  • stretch (default): 伸缩项目沿交叉轴方向拉伸填充整个容器

伸缩项目属性

order: integer

定义项目的排列属性,数值越小,排列越靠前


flex-grow: number

定义伸缩项目的放大比例,默认为 0,不放大,单独将一个项目的 flex-grow 设置为 1,则它占据剩余空间


flex-shrink: number

定义伸缩项目的收缩能力,默认为 1


flex-basis: length | auto

定义伸缩项目的基准值,剩余的空间按比例伸缩,默认是 auto


flex: auto | flex-grow flex-shrink flex-basis;

flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的缩写。其中第二个和第三个参数可选,默认是 0 1 auto


align-self: auto | flex-start | flex-end | center | baseline | stretch

单独设置某个伸缩项目在交叉轴的对齐方式,会覆盖在伸缩容器中的样式

  • auto: 按照自身元素的高度计算,如果没有设置,则按照 stretch 计算
  • flex-start: 单个伸缩项目沿交叉轴起始方向对齐
  • flex-end: 单个伸缩项目沿交叉轴结束方向对齐
  • center: 单个伸缩项目向中间对齐
  • baseline: 单个伸缩项目按照基线对齐,参照前一个项目的基线
  • stretch: 单个伸缩项目沿交叉轴方向拉伸填充整个容器

标签: css

添加新评论