Flex全解析

前言

周末整理一下Flex相关的知识,花了一天的时间,发现细节还是挺多的,特别是flex-shrink公式想了很久。除了第一张图之外,其他的图都是手画,画的不好请见谅。

Flex概念

参考阮一峰老师博客:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

如图,Flex 由父容器 container 和子项目 item 组成,Flex containeritem 有相应的css属性设置。

一、Flex 容器 container

  • 两条轴:水平主轴 main axis,垂直交叉轴 cross axisflex-direction 属性可改变主轴方向

  • 主轴起点终点:起点 main start,终点 main end

  • 交叉轴起点终点:起点 cross start,终点 cross end

实现Flex 布局需给父容器设置 display 属性

.container {
  display: flex | inline-flex;   /* 块级元素设置flex,行内元素设置inline-flex */
}

相应HTML如下:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

1、flex-direction

含义:设置主轴的方向,即 item 的排列方向

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

row:默认值,主轴水平方向,起点在容器左端

row

row-reverse:主轴水平方向,起点在容器右端

row-reverse

column:主轴垂直方向,起点在容器上端

column

column-reverse:主轴垂直方向,起点在容器下端

column-reverse

注释:以下未说明都以 flex-direction: row 为例

2、flex-wrap

含义:设置容器内 item 是否换行;flex-direction 的值为 row 时,每行 item 总宽 > 容器宽换行;值为 column 时,每行 item 总高 > 容器高换列

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

nowrap:默认值,不换行,item 总宽 > 容器宽,主轴宽固定,每个 item 的宽自适应

nowrap

wrap:换行,第一行在上

wrap

warp-reverse:换行,第一行在下

warp-reverse

注:换行时,有多少行,会将容器高均等分,每行是一个整体,而不是所有行作为一个整体

换行注意点

3、flex-flow

含义:flex-directionflex-wrap 的简写

4、justify-content

含义:设置 item 作为一个整体在主轴上的对齐方式;flex-direction 的值为 row 时,在水平方向上对齐;值为 column 时,在垂直方向上对齐

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start:默认值,左对齐

flex-start

flex-end:右对齐

flex-end

center:垂直居中对齐

center

sapce-between:两端对齐,item 之间间隔相等

sapce-between

sapce-arounditem 两侧间隔相等,两端 item 间隔是其他的一半

sapce-around

5、align-item

含义:设置 item 作为一个整体在交叉轴上的对齐方式,flex-direction 的值为 row 时,在垂直方向上对齐;值为 column 时,在水平方向上对齐

.container {
  align-item: stretch | flex-start | flex-end | center | baseline;
}

stretch:默认值,item 未设置高或为 autoitem 的总高和容器高一致

stretch

flex-satrt:交叉轴起点对齐

flex-satrt

flex-end:交叉轴终点对齐

flex-end

center:交叉轴居中对齐

center

baseline:每个item 里的第一行文字的基线(文字底部)对齐

baseline

Tip:设置水平垂直居中 .container { display: flex; justify-content: center; align-item: center; }

6、align-content

含义:容器设置了换行后,所有行作为一个整体的对齐方式;多行时,该属性才有效

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

stretch:默认值,item 未设置高或为 auto ,每行 item 高会平分交叉轴的高

stretch

flex-satrt:交叉轴起点对齐

flex-satrt

flex-end:交叉轴终点对齐

flex-end

center:交叉轴居中对齐

center

sapce-between:两端对齐,每行item 之间间隔相等

sapce-between

sapce-arounditem 两侧间隔相等,两端每行 item 间隔是其他行的一半

sapce-around

Tip:设置水平垂直居中 .container { display: flex; justify-content: center; align-content: center; }

注意:

1)、align-contentalign-item 比较。

  • 多行下,两个属性的 stretchflex-satrtflex-endcenter 实现效果类似,区别只在于换行后,justify-content 是单行作为一个整体,每行均等分高;align-content 是多行作为一个整体

  • align-content 优先级比 justify-content

2)、align-contentjustify-content 比较。

  • 多行下,两个属性的 sapce-betweensapce-around 实现效果,区别只在于 justify-content 在主轴上对齐,align-content 在交叉轴上对齐

二、Flex 项目 item

  • 水平、垂直尺寸:主轴尺寸 main size,交叉轴尺寸 cross size

1、order

含义: item 在容器中的排列顺序,默认为0,无论有没有换行,数值越小,顺序越靠前

.item {
  order: <integer>;
}

orde

2、flex-basis

含义:设置 item 的宽度,会覆盖 widthitem 总宽即每个 flex-basis 值的和,默认为 auto

.item {
  flex-basis: <auto> | <percent> | <size>;
}
  • 值为0或 auto 时,如果 item 没有设置宽度,则宽度为 item 内容宽度

  • 值为百分比,item 的宽度占 container 宽度的百分比

  • 值为固定大小,item 的宽度即为固定大小,如果总宽 > container 宽度,并且设置了换行,则 item 换行,宽度不变;未设置换行,则 item 平分 container 宽度

Tip:建议用 flex-basis 设置 item 的宽度,而不是 width

3、flex-grow

含义:默认值为0,设置 item 放大比例

1)、每个 flex-basis 值的和 > 容器宽,无论是否换行,flex-grow 无效;

2)、每个 flex-basis 值的和 <= 容器宽:

  • item 的宽度且 flex-basis 属性未设置,如果flex-grow 值为0或不设置,items 宽为内容宽,flex-grow 值为正整数:item 宽 = 容器宽 / (每个 itemflex-grow 值之和)

  • flex-basis 属性设置了:item 宽 = 每个 item 已设置的宽度 + (容器宽 - item 已设置的总宽) / item 的数量;

Tip:flex-grow 最好可以和 flex-basis 一起用,哪怕 flex-basis 值为0

.item {
  flex-grow: 0 | <正整数>;
}

flex-grow

4、flex-shrink

含义:默认值为1,设置 item 缩小比例,只有不换行时才有效

.item {
  flex-shrink: 0 | <正整数>;
}

1)、每个 flex-basis 值的和 <= 容器宽,无论是否换行,flex-shrink 无效;

2)、每个 flex-basis 值的和 > 容器宽:

  • flex-shrink 值没设置或相同,即每个 item 均等分容器宽
  • flex-shrinkflex-basis 值不同,如何得到 item 的宽度?

align-self

如图,每个 itemflex-shrinkflex-basis 值都设置了,容器宽为600px:

设置缩小比例为 x,1倍是 x,2倍是 2x,3倍是 3x,第一个盒子应该缩小 240px * x,第二个盒子应缩小 360px * 2x,第3个盒子应缩小 480px * 3x,三个盒子缩小的宽度加上容器宽度,等于三个盒子原来的宽度和,公式为 240 * x + 360 * 2x + 480 * 3x + 600 = 240 + 360 + 480,解出 x = 0.2,每个 item 缩小后的宽度即可得出

Tip:最好不要设置 flex-shrink 值为0,则 item 不缩小,可能会导致 item 撑出容器;并且同一条件下,flex-shrinkflex-grow 只有一个有效

5、flex

含义:是flex-growflex-shrinkflex-basis 的简写,默认值为 o 1 auto

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

快捷键:auto1, 1, auto);none0 0 auto

有以下情况:

1)、flex: 1 <=> flex: 1 1 0%

2)、flex: 0 <=> flex: 0 1 0%

3)、flex: 0% <=> flex: 1 1 0%

4)、flex: 10px <=> flex: 1 1 10px

4)、flex: 2 2 <=> flex: 2 2 0%

5)、flex: 2 10px <=> flex: 2 1 10px

6、align-self

含义:为当前 item 设置在交叉轴方向的对齐方式

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

align-item 区别:

  • align-item 是对所有 itemalign-self 是对当前 item
  • align-selfauto 值表示继承 container 属性

align-self

当前网速较慢或者你使用的浏览器不支持博客特定功能,请尝试刷新或换用Chrome、Firefox等现代浏览器