简介

Flexbox 是 CSS 3 的布局方式,可以轻松实现传统布局中难以实现的布局。

基本用法

  1. 设置父容器的 displayflex,然后调节容器相关的属性。
  2. 调节子元素相关的属性。
1
2
3
4
5
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>
1
2
.container { display: flex; ... }
.item { ... }

具体用法

要使用 Flexbox 布局,你需要设置父容器和子元素的属性。

父容器设置

  1. 启用 flex 布局 display: flex | inline-flex

  2. 设置主轴方向 flex-direction: row | row-reverse | column | column-reverse

    • row 默认值,从左到右
    • row-reverse 从右到左
    • column 从上到下
    • column-reverse 从下到上
  3. 设置子元素的换行方式 flex-wrap: nowrap | wrap | wrap-reverse

    • nowrap 默认值,让所有子元素排在一行中
    • wrap 自动换行,方向为从右到左。(这里的方向是指换行方向,不是指排列方向)
    • wrap-reverse 自动换行,方向为从左到右
  4. flex-directionflex-wrap 的简写:flex-flow: <'flex-direction'> || <'flex-wrap'>

  5. 设置子元素的在主轴中对齐方式 justify-content: flex-start | flex-end | center | space-between | space-around

    • flex-start 默认值,在起始位置对齐。和 flex-direction: row 一起用的话相当于左对齐,和 flex-direction: column 一起用的话相当于上对齐
    • flex-end 在终点位置对齐
    • center 居中对齐
    • space-bewteen 第一个子元素会在起始位置,最后一个子元素会在终点位置,它们之间的元素会在剩余位置中平均分布
    • space-around 所有元素都会平均分布在容器中。注意,视觉上元素不是平均分布的。那是因为所有元素所占的空间都被平均分了,元素两边都有空间,第一个元素和最后一个元素靠近容器的边缘只有一份空间,其他空白的地方都是有两份空间组成的,所以看起来两边的空间少,而中间的空间多。好好体会一下 space-around 字面上的意思就能理解了。
  6. 设置子元素在侧轴中的对齐方式 align-items: flex-start | flex-end | center | baseline | stretch

    • stretch 默认值,拉伸元素来填充父容器
    • flex-start 在侧轴的起始位置对齐
    • flex-end 在侧轴的终点位置对齐
    • center 居中于侧轴
    • baseline 在基线对齐
  7. 设置侧轴中行(不是元素)的对齐方式 align-content: flex-start | flex-end | center | space-between | space-around | stretch

    • stretch 默认值,拉伸行来填充剩余的空间
    • flex-start 所有行在容器的起始位置对齐
    • flex-end 所有行在容器的终点位置对齐
    • center 所有行居中于容器
    • space-between 类似 justify-content: space-between
    • space-around 类似 justify-content: space-around

子元素设置

  1. 设置元素的排序方式 order: <integer>,数字越小,排越前面。默认情况下是以文档流的先后顺序排序,负值合法。

  2. 调节元素的扩展能力 flex-grow: <number>,默认为1,增大该值表示该元素所占空间是其他元素的 n 倍,负值不合法。

  3. 调节元素的收缩能力 flex-shrink: <number>,默认为 1,减少该值表示该元素所站空间是其他元素的 1/n,负值不合法。

  4. 调节元素的基本大小:flex-basis: <length> | auto,默认为 auto。

  5. 上面属性的缩写:flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

  6. 指定元素的排列方式,作用和容器中的 align-items 类似,优先级比 align-items 高。

注意:float, clear, vertical-align 在子元素中不起作用。

参考资料