1. flex布局是什么?

flex 是 flexible box 的缩写, 意为”弹性布局”, 作用是为盒状模型提供最大的灵活性.
任何一个容器都可以设置为flex布局: .container{ display: flex; }
行内元素(inline)也可以使用flex布局: .container { display: inline-flex; }

2. 基本概念

container: 采用 Flex 布局的元素, 称为 Flex 容器（flex container）, 简称”容器”.
item: 容器的所有子元素自动成为容器成员, 称为 Flex 项目（flex item), 简称”项目”. items 默认沿主轴排列。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）, 即横轴和纵轴.
CSS布局: flex布局 - 图1CSS布局: flex布局 - 图2

3. container的属性

container的属性有6个, 即

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

    3.1 flex-direction

    (1) 作用
    改变items流动方向(也是主轴的流动方向).
    (2) 语法
    1. .container{ 
    2.   flex-direction: row | row-reverse | column | column-reverse ; 
    3. }
    (3) 取值
    1. row (默认值) : 主轴为水平方向, 起点在左端.
    2. row-reverse: 主轴为水平方向, 起点在右端.
    3. column: 主轴为垂直方向, 起点在上端.
    4. column-reverse: 主轴为垂直方向, 起点在下端.
    CSS布局: flex布局 - 图3

3.2 flex-wrap

(1) 作用
指定换行的方式.
默认情况下, item都排在一条线（又称”轴线”）上. flex-wrap属性用于指定, 当一条轴线排不下时, 如何换行.
CSS布局: flex布局 - 图4
(2) 语法 

  1. .container{
  2.      flex-wrap: nowrap | wrap | wrap-reverse ;
  3. }

(3) 取值

  • nowrap （默认）：不换行, 即所有item都在一行上.

image.png

  • wrap：换行, 第一行在上方.

image.png

  • wrap-reverse：换行, 第一行在下方.

image.png

3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式, 默认值为row nowrap.
(1) 语法

  1. .container {
  2.      flex-flow: <flex-direction> || <flex-wrap>;
  3. }

(2) 举例

  1. .container { 
  2.      flex-flow: column wrap;
  3. }

3.4 justify-content

(1) 作用
设置item在主轴上的对齐方式. (注: 默认主轴是横轴, 除非改变了flex-direction方向)
(2) 语法

  1. .container{
  2.   justify-content: flex-start| flex-end| center| space-between| space-around| space-evenly
  3. }

(3) 取值
具体对齐方式与轴的方向有关. 默认主轴为横轴, 其方向为从左至右.

  1. flex-start(默认值): 从主轴行首开始排列;
  2. flex-end: 从主轴行尾开始排列;
  3. center: 居中;
  4. space-between: 两端对齐, item之间的间距都相等.
  5. space-around: 每个item两侧的间距相等. 所以, item之间的间距比item与边框的间距大一倍.
  6. space-evenly: 间距(space)均匀地分布, 即
  7.               相邻item的间距 = 主轴起始位置到第一个item的间距 = 主轴结束位置到最后一个item的间距.

image.png

3.5 align-items

(1) 作用
设置item在交叉轴(cross axis)上的对齐方式. 默认交叉轴是纵轴.
(2) 语法

  1. .container{
  2.      align-items: flex-start | flex-end | center | baseline | stretch;
  3. }

(3) 取值

  1. flex-start: 交叉轴的起点对齐.
  2. flex-end: 交叉轴的终点对齐.
  3. center: 交叉轴的中点对齐.
  4. baseline: item的第一行文字的基线对齐.
  5. stretch（默认值): 如果item未设置高度或设为auto，item将被拉伸到与容器相同的高度.

image.png

3.6 align-content

align-content属性很少用到.
(1) 作用:
设置多根轴线(轴线是指item所排列的线)的对齐方式。如果item只有一根轴线(即container只有一行items)，
那么该属性不起作用。
(2) 语法

  1. .container {
  2.      align-content: flex-start| flex-end| center| space-between| space-around| stretch;
  3. }

(3) 取值

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

image.png

4. item的属性

item的属性有6个, 即

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

    4.1 order

    (1) 作用
    设置item的排列顺序. 数值越小, 排列越靠前.
    默认为0, 即不重新排序.
    数值只能取整数, 可以是正整数, 也可以是负整数.
    (2) 语法
    1. .item { order: <integer>; }
    (3) 举例
    1. .item {
    2.   order: 5;
    3. }
    image.png

4.2 flex-grow

(1) 作用
设置item的放大比例. 默认为0, 即如果存在剩余空间, 也不放大. 负数无效.
(2) 语法

  1. .item {
  2.    flex-grow: <number>; /* default 0 */
  3. }

(3) 举例
如果所有item都将flex-grow的值设置为1, 则container中的剩余空间将平均分配给所有item;
如果其中一个item将flex-grow的值设置为2, 其他item都设置为1, 则前者占据的剩余空间将是其他item的2倍.
image.png

4.3 flex-shrink

(1) 作用
设置item的缩小比例. 默认值是1, 即如果空间不足, 该item将缩小. 负数无效.
(2) 语法

  1. .item {
  2.    flex-shrink: <number>; /* default 1 */
  3. }

(3) 举例
如果所有item的flex-shrink属性都为1, 当空间不足时, 都将等比例缩小;
如果一个item的flex-shrink属性为0, 其他item都为1, 则空间不足时, 前者不缩小.
image.jpeg

4.4 flex-basis

(1) 作用
设置基准宽度. 默认值为auto.
(2) 语法 

  1. .item{
  2.    flex-basis: <length> | auto; /* default auto */
  3. }

(3) 取值
它可以设为跟width或height属性一样的值（比如100px, 20%等），则item将占据固定空间。

4.5 flex

flex属性是flex-grow, flex-shrink, flex-basis的简写, 默认值为 0 1 auto. 后两个属性可选.
(1) 语法

  1. .item {
  2.    flex: none | [ <'flex-grow'> <'flex-shrink'> || <'flex-basis'> ]
  3. }

(2) 快捷值
该属性有两个快捷值: auto (1 1 auto) 和 none (0 0 auto).

4.6 align-selff

(1) 作用
该属性允许单个item有与其他item不一样的对齐方式, 可覆盖align-items属性.
默认值为auto, 表示继承父元素的align-items属性, 如果没有父元素, 则等同于stretch.
(2) 语法

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

注意: 该属性是items的属性, 不是container的属性.
image.png

5. 常用的flex属性

常用的flex属性代码如下:

  • display: flex;
  • flex-direction: row / column;
  • flex-wrap: wrap;
  • justify-content: center / space-between;
  • align-items: center;

6.flex实践

6.1 不同布局

  • 用flex做两栏布局;
  • 用flex做三栏布局;
  • 用flex做四栏布局;
  • 用flex做平均布局;

  • flex组合使用, 做更复杂的布局

    6.2 经验

  • 不要把width和height写死, 除非特殊说明;

  • 使用min-width / max-width / min-height / max-height;
  • flex和margin-xxx: auto 配合使用有意外效果;

说明:

  • 写死

width: 200px;

  • 不写死

width: 25%
max-width:1024px
width: 30vw
min-width:80%
特点: 不使用px, 或者加min, max前缀.