CSS:flex梳理

65 阅读6分钟
概念

Flex是Flexible box的缩写,意思是弹性布局。用来为盒模型提供最大的灵活性。

传统的布局,是依赖display + position + float属性实现的。这种组合方案,对于一些特殊的布局实现起来很不方便。

任何一个容器都可以指定为Flex布局。但需要注意的是,容器设置为Flex布局后,其内的子元素float、clear和vertical-align都将失效。

容器:采用Flex布局的元素,成为Flex容器,简称容器。

项目:Flex容器内所以子元素自动成为容器的成员,称为Flex项目,简称项目。

容器默认存在两根轴,水平主轴(从左至右)和垂直交叉轴(从上至下)。

容器的常用属性

容器相当于父元素,用在父元素上的属性,有如下6个:flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。

flex-direction

该属于用于设置主轴的方向。有4个可选值:

  • row: (默认值)主轴为水平方向,起点在左端,从左至右排列;
  • row-reverse:主轴为水平方向,起点在右端,从右至左排列;
  • column:主轴为垂直方向,起点在上沿,从上至下排列;
  • column-reverse:主轴为垂直方向,起点在下沿,从下至上排列。
flex-wrap

该属性用于控制项目(子元素)是否换行。有3个可选值:

  • nowrap:(默认值)不换行;
  • wrap:换行,第一行在上方;
  • wrap-reverse:换行,第一行在下方。

注意:默认情况下,是不换行的,如果父级容器装不下,会缩小所有子元素的宽度,使子元素挤在一行。

flex-flow

该属性是flex-direction和flex-wrap的简写形式,默认值是row nowrap

justify-content

该属性设置主轴上子元素的对齐方式。有5个可选值(注意:主轴是可以改变的,可以是水平方向,也可以是垂直方向,所以子元素的对齐方式要参考主轴方向):

  • flex-start:(默认值)左对齐,沿着主轴开始到末尾对齐;
  • flex-end:右对齐,沿着主轴末尾至开始对齐;
  • center:居中对齐;
  • space-around:每个项目(子元素)两侧的间隔相等。所以,项目(子元素)之间的间隔比项目与边框的间隔大一倍;
  • space-around:两端对齐,项目(子元素)之间的间隔都是相等的。
align-items

该属性设置交叉轴上的子元素的对齐方式。适合用于项目都在一行,不适用于多行项目。有5个可选值(注意:同样交叉轴也是可以改变的,可以是水平方向,也可以是垂直方向,所以子元素的对齐方式要参考交叉轴方向)

  • flex-start:交叉轴的起点对齐;
  • flex-end:交叉轴的终点对齐;
  • center:交叉轴的中点对齐,也就是垂直居中;
  • baseline:项目的第一行文字的基线对齐;
  • stretch:(默认值)如果项目未设置高度或设为auto,将占满整个容器的高度。
align-content

该属性用于设置当项目有多行的时候,在交叉轴的排列方式。有6个可选值:

  • flex-start:与交叉轴的起点对齐;
  • flex-end:与交叉轴的终点对齐;
  • center:与交叉轴的中点对齐;
  • space-around:交叉轴方向上,项目之间的间隔比两侧项目距边框的间隙大一倍;
  • space-between:交叉轴方向上,两端对齐,项目之间的间隔平均分布;
  • stretch:(默认值)占满整个交叉轴;

align-content:小shy在3.5提到过align-items适用于子元素在单行中使用,这个align-content则就是为了子元素多行的时候设置交叉轴的子元素的排列方式。 该属性可能取6个值:

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

项目(子元素)的常用属性

用在项目也就是子元素上的属性,有如下6个:order、flex-grow、flex-shrink、flex-basis、flex、align-self。

order

该属性用来定义项目的排列顺序。值越小,排列越靠前,默认为0。

flex-grow

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

注意:只对容器内存在的剩余空间进行按比例分配。即如果各项目占满容器,此项设置无效。如果存在剩余空间,按各项目的flex-grow设置的值按比例分配剩余空间。

flex-shrink

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

注意:只有当容器内项目宽度超过容器时,该属性生效。并且只针对超出的宽度进行按比例分配缩小各项目。当对某项目设置flex-shrink:0时,该项目不会被缩小。并且负值对该属性无效。

flex-basis

该属性是用来定义项目占据主轴空间的大小,默认值为auto,即项目本来的大小。

注意:当主轴为水平方向时,flex-basis设置的是项目的宽,优先级比width高;当主轴为竖直方向时,flex-basis设置的是项目的高,优先级比height高。

flex

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

同时,该属性有两个快捷值:auto,代表1 1 auto;none,代表0 0 auto

所以,如果所有的项目设置flex:1,则项目会均分主轴剩余空间;如果一个项目设置flex:2,其他项目设置flex:1,则前者占据的剩余空间将比其他多一倍。也就是项目占多少份,flex设置对应的值即可。

align-self

该属性可以设置单个项目的对齐方式,也就是可以覆盖容器元素的align-items属性,默认值为auto,表示继承父元素的align-items属性。可选值包括:auto、flex-start、flex-end、center、baseline、stretch。

总结

本文是对flex盒模型的一些概念和属性的总结,方便日后查阅。

如有错漏,欢迎指正讨论!!!