再学 Flexbox 弹性布局

1.基本概念

flex 布局是第一套用于布局的 css 方法。采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

1-1.png

容器有两根轴：主轴（main axis）和 交叉轴（cross axis）；若主轴是横向，那交叉轴就是竖向，反之。

2. flex 容器的属性 （6）

2.1flex 容器定义

基本用法

.container {
  display: flex;
}

2.2 flex-direction

flex-direction ：设置容器里的项目的排序方向，也就是设置主轴的方向，预设值为：row；

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

• row ：横向（从左到右）
• column：竖向 （从上到下）
• row-reverse：翻转横向（从右到左）
• column-reverse：翻转竖向（从下到上）

.container {
    flex-direction: row
}

1-2.png

.container {
    flex-direction: column
}

1-3.png

.container {
    flex-direction: row-reverse
}

1-4.png

.container {
    flex-direction: column-reverse
}

1-5.png

2.3 flex-wrap

flex-wrap：当项目在容器的主轴方向排序且容器在主轴的长度不够时，可以进行换行设置。当容器的主轴长度足够装下所有项目时则该属性不起作用。预设值：nowrap

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

• wrap：所有项目多行排序，从交叉轴的起点作为多行排序的起点
• nowrap：所有项目都只会在一行排序
• wrap-reverse：所有项目多行排序，从交叉轴的终点作为多行排序的起点

.container {
    flex-wrap: wrap
}

1-6.png

.container {
    flex-wrap: nowrap
}

当容器装不下时，还会压缩项目的大小

1-7.png

.container {
    flex-wrap: wrap-reverse
}

1-8.png

2.4 flex-flow

flex-flow：是 flex-direction 属性和 flex-wrap 属性的简写形式，预设值为 row nowrap

2.5 justify-content

justify-content：设置项目在主轴上的对齐方式，预设值为 flex-start

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

• flex-start：从主轴起点方向开始排序
• flex-end：从主轴终点方向开始排序（不改变所有item的顺序，相当于从主轴起点把所有项目整体移向主轴终点）
• center：居中排序
• space-between：多个项目中的第一个在主轴起点，最后一个在主轴终点，所有项目相邻间距都相等，均匀分布。（0项目1项目1项目0）
• space-around：每个项目在主轴方向两侧的间距都相等，均匀分布。（1项目2项目2项目1）
• space-evenly：项目于项目之间和项目与容器边之间的间距都相等，均匀分布。（1项目1项目1项目1）

.container {
    justify-content: flex-start
}

1-9.png

.container {
    justify-content: flex-end
}

1-10.png

.container {
    justify-content: center
}

1-11.png

.container {
    justify-content: space-between
}

1-12.png

.container {
    justify-content: space-around
}

1-13.png

.container {
    justify-content: space-evenly
}

1-14.png

2.6 align-items

align-items：项目在交叉轴的对齐方式，预设值为 stretch

• flex-start：从交叉轴方向起点对齐
• flex-end：从交叉轴方向终点对齐
• center：设置项目在交叉轴方向的中间位置
• baseline：交叉轴方向按第一行文字基线对齐
• stretch：交叉轴方向由起点拉伸到终点位置，当项目在交叉轴方向有长度时不起效果

.container {
    align-items: flex-start
}

1-15.png

.container {
    align-items: flex-end
}

1-16.png

.container {
    align-items: center
}

1-17.png

.container {
    align-items: baseline
}

1-19.png

.container {
    align-items: stretch
}
.item1 {
    height: 0
}

1-18.png

2.7 align-content

align-content：在主轴方向多行排序时（flex-wrap: wrap），这些行的对齐方式。预设值为 stretch

• stretch：拉伸显示，项目在交叉轴方向有长度时不起效果
• flex-start：从交叉轴起点开始排序，次行贴着上行
• flex-end：从交叉轴终点开始排序（不改变项目顺序），次行贴着上行
• center：从交叉轴中间位置开始排序，次行贴着上行
• space-between：项目在交叉轴的起终点各占一行，其余均与分布
• space-around：项目在交叉轴方向两侧间距相等，均匀分布

.container {
    align-content: stretch
}
.item2 {
    height: 0
}

1-20.png

.container {
    align-content: flex-start
}

1-21.png

.container {
    align-content: flex-end
}

1-22.png

.container {
    align-content: center
}

1-23.png

.container {
    align-content: space-between
}

1-24.png

当超过两行时，没增加一行都是交叉轴的终点位置

1-25.png

.container {
    align-content: space-around
}

1-26.png

3. flex 项目属性（6）

3.1 order

order：项目在容器中出现的先后顺序是按照 order 值排序，越小的排序越靠前，值可以是负数。预设值为 0

.item {
    order:  /* 整数 */
}

.item2 {
    order: -1
}

1-27.png

3.2 flex-grow

flex-grow：项目放大比例，值不能是负数，预设值为 0（不放大）

.item2: {
    flex-grow: 1
}

flex-grow: 0 的 item1 和 item3 不改变大小，空隙为 120px，只有一个item2 放大会直到占满空隙。

image-20200715200815458.png

.item1 {
    flex-grow: 1
}
.item2 {
    flex-grow: 1
}
.item3 {
    flex-grow: 3
}

多个都放大，这里空隙是px120，grow 总共为 5，item1 和 item2 各增加空隙的 1/5（24px），item3 增加空隙的3/5 （72px）

1-28.png

3.3 flex-shrink

flex-shrink：项目的缩小比例，不能是负数。在容器空间不足时起效果（flex-wrap: nowrap）。预设值为 1

.item {
    flex-shrink: 0
}

1-29.png

在 flex-wrap: nowrap 下，shrink 为 0 不缩放

.item1 {
    flex-shrink: 1
}
.item1 {
    flex-shrink: 2
}
.item1 {
    flex-shrink: 2
}

在这里已经超出了 180px，shrink 总共为 5，item1 shrink为1，将承担超出的 1/5（36px），item2 和 item3 shrink为 2，将各自承担超出的 2/5（72px）

1-30.png

3.4 flex-basis

flex-basis：设置项目在主轴方向的长度，原本项目在主轴方向设置的长度将失效。值可以是百分比，rem， px等。预设值为 auto（保持在主轴方向原有的长度）。

.item3 {
    flex-shrink: 100px
}

1-31.png

flex-direction: column 时，

1-32.png

3.5 flex

flex：是 flex-grow, flex-shrink 和 flex-basis 的简写，预设值为 0 1 auto。flex-shrink 和 flex-basis 都是可选的。

3.6 align-self

align-self：给项目设置在交叉轴的对齐方式，不同于容器的属性 align-items（设置所有项目在交叉轴的对齐方式），align-self 是单独给项目设置，此时若已有 align-items 属性，align-items 对设置了 align-self 的项目不再起到效果。对于没有设置 align-self 的项目任然起作用。预设值为 auto，表示继承容器的 align-items 属性，如果没有 align-items，则等同于 stretch。

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

• 除了auto值以外，align-self 属性与容器的 align-items 属性基本一致。

.item3 {
    align-self: auto；/* 同于 stretch */
    height: 0; /* 在交叉轴方向有长度 stretch 不起效 */
}

1-33.png

.item3 {
    align-self: flex-start
}

1-34.png

.item3 {
    align-self: flex-end
}

1-35.png

.item3 {
    align-self: center
}

1-36.png

.item1, .item2, .item3 {
    align-self: baseline
}

1-37.png

.item2 {
    align-self: stretch;
    height: 0;
}

1-38.png

4. 兼容性

Chrome	Safari	Firefox	Opera	IE	Android	IOS
21+	6.1+	22+	12.1	11+	4.4+	7.1+