1.1 Flex 布局是什么?
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局,采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start
,结束位置叫做main end
;交叉轴的开始位置叫做cross start
,结束位置叫做cross end
。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size
,占据的交叉轴空间叫做cross size
。
行内元素也可以使用 Flex 布局。
- flex: 将对象作为弹性伸缩盒显示,没有为父元素设置宽度,默认为100%。
- inline-flex:将对象作为内联块级弹性伸缩盒显示,父元素默认会根据子元素的宽高去自适应。
注意:flex 布局的子元素不会脱离文档流,flex 布局不支持 IE9 及以下的版本;IE10及以上也只是部分支持。
1.2 容器的属性
以下6个属性设置在容器上。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
其中:
(1)flex-direction
属性决定主轴的方向(即项目的排列方向)。
有4个值。
row
(默认值):主轴为水平方向,起点在左端。row-reverse
:主轴为水平方向,起点在右端。column
:主轴为垂直方向,起点在上沿。column-reverse
:主轴为垂直方向,起点在下沿。
(2)flex-wrap
默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap
属性定义,如果一条轴线排不下,如何换行。
可取三个值。
nowrap
(默认):不换行。
wrap
:换行,第一行在上方。
rap-reverse
:换行,第一行在下方。
(3)flex-flow
flex-flow
属性是 flex-direction
属性和 flex-wrap
属性的简写形式,默认值为 row nowrap
。
(4) justify-content
justify-content
属性定义了项目在主轴上的对齐方式。
可取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start
(默认值):左对齐flex-end
:右对齐center
: 居中space-between
:两端对齐,项目之间的间隔都相等space-around
:每个项目两侧的间隔相等,项目之间的间隔比项目与边框的间隔大一倍space-evenly
:每个项目两侧的间隔相等,项目之间间隔比项目与边框的间隔相等
(5) align-items
align-items
属性定义项目在交叉轴上如何对齐。
可取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。
flex-start
:交叉轴的起点对齐。flex-end
:交叉轴的终点对齐。center
:交叉轴的中点对齐。baseline
:项目的第一行文字的基线对齐。stretch
(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
(6)align-content
align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
该属性可能取6个值。
flex-start
:与交叉轴的起点对齐。flex-end
:与交叉轴的终点对齐。center
:与交叉轴的中点对齐。space-between
:与交叉轴两端对齐,轴线之间的间隔平均分布。space-around
:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。space-evenly
:元素间距离平均分配stretch
(默认值):轴线占满整个交叉轴。
1.3 弹性元素
放在容器盒子中的元素即为弹性元素。
- float、clear 和 vertical-align 属性将失效
- 弹性元素均为块元素
- 绝对定位的弹性元素不参与弹性布局
(1)align-self
用于控制单个元素在交叉轴上的排列方式。
align-items 用于控制容器中所有元素的排列,而 align-self 用于控制一个弹性元素的交叉轴排列, 能够覆盖容器的 align-items 属性。
可取4个值。
flex-start
:交叉轴的起点对齐。flex-end
:交叉轴的终点对齐。center
:交叉轴的中点对齐。stretch
(默认值):将空间平均分配给元素。
(2) flex-grow
控制剩余空间是否放大,默认0,即如果存在剩余空间,也不放大。适合不确定文字数量自适应宽度。剩余空间就是父容器在主轴的方向上还有多少可用的空间。
注意:如果元素不是弹性盒对象的元素,则 flex-grow 属性不起作用。 如果弹性元素设置了宽度,将把(弹性盒子 - 弹性元素宽度和)后按照 flex-grow 进行分配 。
(3) flex-shrink
控制空间不够的时候是否缩小,默认 1,即如果空间不够则缩小,可以正常展示全该展示的东西,比如 icon、图片等,如果设为 0,则会出现超出截断的问题。
注意:如果元素不是弹性盒对象的元素,则 flex-shrink 属性不起作用。负值对该属性无效。
(4) flex-basis
- 定义了在分配多余空间之前,弹性元素占据的主轴空间(main size)。
- 浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为
auto
,即弹性元素的本来大小。 - 属性值的作用也就是width的替代品。
取值:
- 长度单位
- 百分比
flex-basis 的优先级高于 width、height 属性。 优先级 flex-basis 优先级大于 width、height。主轴方向。
注意:flex-basis 和 width 为 auto 值,那最后的空间就是根据内容多少来定的,内容多占据的水平空间就多。
弹性元素取值优先级高到低:
- max-width、max-height、min-width、min-height
- flex-basis
- width、height
- 内容本身的size
1.4 flex
flex 是 flex-grow、flex-shrink 、flex-basis 综合写法。
语法:
flex:flex-grow flex-shrink flex-basis;
flex:0 1 auto;(默认值)
- 后两个属性可选
注意:
- 一个值
- 一个无单位的值会被认为 flex-grow 的值
- 一个有效单位的宽度值,会被认为 flex-basis
- 两个值
- 第一个值必须是:无单位数,认为是 flex-grow
- 第二个值必须是:一个无单位数:认为是 flex-shrink;一个有效单位宽度:认为是 flex-basis
- 三个值
- 第一个值必须是无单位数,认为是 flex-grow
- 第二个值必须是无单位数,认为是 flex-shrink
- 第三个值必须是有效单位宽度,认为是 flex-basis