Flex 布局小记

787 阅读3分钟

一、什么是Flex布局

Flex 即 Flexible Box,意为 “弹性布局”,用来提升盒状模型的灵活性。

任何一个块元素都可以指定为Flex布局

.block {
    display: flex
}

同样,行内元素也可以指定为Flex布局

.inline-block {
    display: inline-flex
}

注:Flex 布局内子元素的floatclearvertical-align属性都会失效。

二、基本概念

采用Flex布局的元素称为Flex Container,它的所有子元素自动成为Flex Item

image.png

如上图所示,Flex容器存在两个轴:水平的主轴(main axis),垂直的交叉轴(cross axis)。

容器内的项默认沿着主轴排列,单个项占据的主轴空间叫做 main size,占据的交叉轴空间叫做 cross size。

三、Flex容器的属性

flex-direction

flex-direction决定主轴的方向

.block {
    flex-direction: row | row-reverse | column | column-reverse
}

image.png

flex-wrap

默认情况下,容器内子元素都排列在一条轴线上,flex-wrap 属性定义当一条轴线排列不下时,如何进行换行。

.block-box{
  flex-wrap: nowrap | wrap | wrap-reverse
}

其中:

  1. nowrap表示不换行(默认) image.png

  2. wrap表示换行,依次排列 image.png

  3. wrap-reverse表示换行并翻转 image.png

flex-flow

flex-flowflex-directionflex-wrap属性的简写,默认值为row nowrap

.block-box{
  flex-flow: <flex-direction> || <flex-wrap>
}

justify-content

justify-content定义元素在主轴上的对齐方式

.block-box {
  justify-content: flex-start | flex-end | center | space-between | space-around
}

image.png

如上图所示,其取值共有五个,假设flex-direction: row

flex-start 左对齐(默认)
flex-end 右对齐
center 居中
space-between 两端对齐,项目之间间隔相等
space-around 项目左右间距相等

align-items

align-items定义元素在交叉轴上的对齐方式

.block-box {
  align-items: flex-start | flex-end | center | baseline | stretch
}

image.png

如上图所示,该属性的可能取值有5中,假设flex-direction: column

flex-start 上对齐
flex-end 下对齐
center 居中
baseline 与第一行文字基线对齐
stretch 子元素占满容器(默认)

align-content

align-content属性定义多根轴线的对齐方式。(只有一根轴线时,无效)

.block-box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch
}

image.png

如上图所示,该属性有6个可能取值:

flex-start 交叉轴起点对齐
flex-end 交叉轴终点对齐
center 交叉轴中点对齐
space-between 两端对齐,轴线之间间隔相等
space-around 轴线左右间距相等
stretch 轴线占满整个交叉轴(默认)

四、Flex项的属性

order

order定义子项的排列顺序,从小达到排列,默认值0

.inline-item {
    order: <integer>
}

image.png

flex-grow

flex-grow定义子项放大的比例,默认为0,即不放大

.inline-item {
    flex-grow: <integer>
}

image.png

注:如果所有子项的flex-grow都设置为1,则等分剩余空间。如果一个子项的值设置为2,其他的为1,则前者占据的剩余空间是其他子项的一倍。

flex-shrink

flex-shrink定义子项缩小的比例,默认为1,即当空间不足时,将子项缩小

.inline-item {
    flex-shrink: <integer>
}

image.png

flex-basis

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

.inline-item {
    flex-basis: <length> | auto
}

注:可以将其值设置为width或者height属性一样的值(如100px),则子项将占据固定空间。

flex

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

.inline-item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

注:建议优先使用该属性,而不是单独写三个分离的属性。

align-self

align-self属性允许单个项目有余其他项目不一样的对齐方式,可以覆盖align-items属性。默认值为auto,表示继承align-items属性。

.inline-item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

image.png

该属性可能取6个值,除了auto,其他都与align-items属性完全一致。