flex布局

flex

flex是flexible box的缩写，也叫弹性盒子布局。

1.为什么要flex布局？

​ 在我们常规布局方式(IFC BFC)已经不能满足我们所需要的方式了，因此flex布局也就应运而生。下面来深入学习一下flex布局的相关知识。

2.flex布局

在flex布局中，有水平的主轴(main axis)和垂直的交叉轴(cross axis)。

主轴起点叫main start 终点叫做main end.

交叉轴起点叫做 cross start 终点叫做 cross end.

图一

3.flex-direction

flex-direction改变主轴和交叉轴的指向。也是改变项目的指向。

​ 默认值：row 即：主轴从左到右

还有以下属性

​ row-reverse 主轴从右指向左

​ column 主轴从上到下

​ column-reverse 主轴从下到上

侧轴则与主轴交换位置

4.flex的自动宽度

在说明自动宽度之前，我们先来说明一下width的几个属性：

​ max-content

​ min-content

max-content是不管父盒子的宽度，一直像→延申。

min-content表示容器为最小元素的宽度就行

---

当使用flex布局时，子元素总宽度不超过容器宽度的时候，默认子元素宽度就是max-content。

如果总宽度大于容器宽度的时候，默认子元素宽度就是min-content的宽度。

5.flex指定宽度

在flex布局中，如果子元素需要指定宽度的时候，可以使用flex-basis这个属性。当盒子中还有空余宽度的时候，可以使用flex-grow来分配盒子中的剩余宽度。

6.flex自动缩小

当我们子元素宽度大于容器宽度的时候，容器不会被撑开。而是子元素会缩水，可以通过flex-shrink来指定缩水的大小。默认值为1

7.flex简写

flex:grow shrink basis如果不写的话，默认值就是1。

例子：等分：flex:1 0px

8.对齐方式

主轴-justify-content：

• center
  space-around
• space-evenly
• space-between
• flex-start
• flex-end

交叉轴-align-items:

• center
• flex-start
• flex-end
• stretch
• baseline

多轴–align-content:

只有设置了flex：warp才会生效

• flex-start：与交叉轴的起点对齐。

  flex-end：与交叉轴的终点对齐。

  center：与交叉轴的中点对齐。

  space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

  space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

  stretch（默认值）：轴线占满整个交叉轴。

9.换行

flex-warp:warp

默认nowarp

10.order

优先级显示顺序

与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

9.换行

flex-warp:warp

默认nowarp

10.order

优先级显示顺序