flex总结

Flex 布局-容器

1
div { display: flex | inline-flex }

属性值

描述
flex-direction flex-direction属性决定主轴的方向(即项目的排列方向)。
flex-wrap 默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
justify-content 项目在主轴上的对齐方式。
align-items 项目在交叉轴上如何对齐。
align-content align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

flex-direction

定义和用法

flex-direction属性决定主轴的方向(即项目的排列方向)。

alt 2021-10-15

属性值

描述
row(默认值) 主轴为水平方向,起点在左端
row-reverse 主轴为水平方向,起点在右端
column 主轴为垂直方向,起点在上沿
column-reverse 主轴为垂直方向,起点在下沿

flex-wrap

定义和用法

flex-wrap 属性规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。。

注意:如果元素不是弹性盒对象的元素,则 flex-wrap 属性不起作用。

alt 2021-10-15

CSS 语法

1
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
nowrap(默认):不换行。

alt 2021-10-15

换行,第一行在上方

alt 2021-10-15

换行,第一行在下方。

alt 2021-10-15

属性值

描述
nowrap 默认值。规定灵活的项目不拆行或不拆列。
wrap 规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse 规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序。
wrap-reverse 规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序。

flex-flow

定义和用法

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。

flex-flow 属性用于设置或检索弹性盒模型对象的子元素排列方式。

flex-direction 属性规定灵活项目的方向。

flex-wrap 属性规定灵活项目是否拆行或拆列。

注意:如果元素不是弹性盒对象的元素,则 flex-flow 属性不起作用。

CSS 语法

1
flex-flow: flex-direction flex-wrap|initial|inherit;

属性值

描述
flex-direction 可能的值:row、row-reverse、column、column-reverse、initial、inherit默认值是 “row”。
flex-wrap 可能的值:nowrap、wrap、wrap-reverse、initial、inherit、默认值是 “nowrap”。规定灵活项目是否拆行或拆列。

justify-content

定义和用法

定义了项目在主轴上的对齐方式。

CSS 语法

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

alt 2021-10-15

属性值

描述
flex-start (默认值)左对齐
flex-end 右对齐
center 居中
space-between 两端对齐,项目之间的间隔都相等
space-around 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍

align-items

定义和用法

定义项目在交叉轴上如何对齐。

CSS 语法

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

alt 2021-10-15

属性值

描述
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
baseline 项目的第一行文字的基线对齐
stretch 默认值:如果项目未设置高度或设为auto,将占满整个容器的高度

align-content

定义和用法

定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

CSS 语法

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

alt 2021-10-15

属性值

描述
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
space-between 与交叉轴两端对齐,轴线之间的间隔平均分布
space-around 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍
stretch 默认值:轴线占满整个交叉轴

Flex 布局-项目

项目属性

描述
order 定义项目的排列顺序。数值越小,排列越靠前,默认为0
flex-grow 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
flex-shrink 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
flex-basis 定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小
flex flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选
align-self align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

order

定义

定义项目的排列顺序。数值越小,排列越靠前,默认为0

CSS 语法

1
order: <integer>;

alt 2021-10-15

flex-grow

定义和用法

定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

注意:如果元素不是弹性盒对象的元素,则 flex-grow 属性不起作用。

CSS 语法

1
flex-grow: number|initial|inherit; /* default 0 */

alt 2021-10-15

属性值

描述
number 一个数字,规定项目相对于其他灵活的项目进行扩展的量。默认值是 0。

flex-shrink

定义和用法

定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

注意:如果元素不是弹性盒对象的元素,则 flex-shrink 属性不起作用。

CSS 语法

1
flex-shrink: number|initial|inherit;

alt 2021-10-15

属性值

描述
number 一个数字,规定项目相对于其他灵活的项目进行扩展的量。默认值是 0。

flex-basis

定义和用法

定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

注意:如果元素不是弹性盒对象的元素,则 flex-basis 属性不起作用。

CSS 语法

1
flex-basis: <length> | auto; /* default auto */

属性值

描述
number 一个长度单位或者一个百分比,规定灵活项目的初始长度。
auto 默认值。长度等于灵活项目的长度。如果该项目未指定长度,则长度将根据内容决定。

flex

定义和用法

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。默认值为0 1 auto。后两个属性可选。

注意:如果元素不是弹性盒模型对象的子元素,则 flex 属性不起作用。

CSS 语法

1
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

属性值

描述
flex-grow 一个数字,规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink 一个数字,规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis 项目的长度。合法值:”auto”、”inherit” 或一个后跟 “%”、”px”、”em” 或任何其他长度单位的数字。
auto 与 1 1 auto 相同。
none 与 0 0 auto 相同。

align-self

定义和用法

允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

注意:如果元素不是弹性盒对象的元素,则 align-self 属性不起作用。

CSS 语法

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

alt 2021-10-15

属性值

描述
auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。
stretch 元素被拉伸以适应容器。如果指定侧轴大小的属性值为’auto’,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照’min/max-width/height’属性的限制。
flex-start 元素位于容器的开头。弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
flex-end 元素位于容器的结尾。弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
center 元素位于容器的中心。弹性盒子元素在该行的侧轴(纵轴)上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
baseline 元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条,则该值与’flex-start’等效。其它情况下,该值将参与基线对齐。