Flex—弹性布局详解

目录

一：Flex简介

二：基本概念

三：容器属性

3.1.flex-direction

3.2.flex-wrap 

3.3.flex-flow

3.4.justify-content

3.5.align-items

3.6.align-content

四：项目属性

4.1.order

4.2.flex-grow

4.3.flex-shrink

4.4.flex-basis

4.5.flex

4.6.align-self

---

一：Flex简介

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 Flex 布局。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

二：基本概念

容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。如下图所示：

 任何一个容器都可以指定为 Flex 布局

.box{
  display: flex;
}

并且行内元素也可以使用 Flex 布局

.box{
  display: inline-flex;
}

注意：父级元素设置为flex布局后，子元素的float、clear、vertical-align属性都将失效

三：容器属性

容器属性顾名思义就是设置在容器身上的属性，一共有6个，下面来一 一介绍

3.1.flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向）

 flex-direction: row | row-reverse | column | column-reverse

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

3.2.flex-wrap 

flex-wrap属性用于设置当项目在容器中一行无法显示的时候如何处理。默认情况下，项目都排在一条线（又称"轴线"）上

flex-wrap: nowrap | wrap | wrap-reverse;

• nowrap（默认）：不换行，这种情况子元素会缩小自己的尺寸来使所有元素在一行中显示

•   wrap：换行，第一行在上方

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

3.3.flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

flex-flow: flex-direction flex-wrap

3.4.justify-content

justify-content属性定义项目在主轴（水平）上的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around

具体对齐方式与轴的方向有关，下面假设主轴为从左到右

• flex-start（默认值）：左对齐

• flex-end：右对齐

• center： 居中

• space-between：两端对齐，项目之间的间隔都相等

• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

3.5.align-items

align-items属性定义项目在交叉轴（垂直）上如何对齐

align-items: flex-start | flex-end | center | baseline | stretch

具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下

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

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

• center：交叉轴的中点对齐

• baseline: 项目的第一行文字的基线对齐

• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

3.6.align-content

align-content属性定义了多根轴线（多行）的对齐方式。如果项目只有一根轴线（单行），该属性不起作用

align-content: flex-start | flex-end | center | space-between | space-around | stretch

• flex-start：项目在容器的顶部排列

• flex-end：项目在容器的底部排列

• center：项目在容器内居中排列

• space-between：多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部

• space-around：多行项目之间的间隔平均分布，每行的间距（包括离容器边缘的间距）都相等

• stretch（默认值）：将项目拉伸以占满整个交叉轴

四：项目属性

项目属性就是写在项目身上的，用来设置项目

4.1.order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认值为0

 order: integer

4.2.flex-grow

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

flex-grow: number

• 当其中的一个项目设置了flex-grow为1时，它将占据剩余空间的100%
• 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）

• 如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

4.3.flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

 flex-shrink: number

•  如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小

•  如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小

注意：负值对该属性无效

4.4.flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性（单位px、%...），计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

简单来说，当设置了flex-basis以后，就设定了项目的尺寸。

flex-basis: length

注意：width跟flex-basis的区别是，flex-basis的优先级更高。如果设置的flex-basis的值不为auto，那么width设置什么值都无效，以flex-basis的值为准。只有当flex-basis的值为auto的时候，该项目才会是width设定的值。flex-basis和width为auto值，那最后的空间就是根据内容多少来定的，内容多占据的水平空间就多

4.5.flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

 /*书写顺序*/
flex: flex-grow flex-shrink flex-basis

注意：该属性有两个快捷值：auto（1 1 auto）和 none（0 0 auto）

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

注意：当flex取值为一个非负数字，则该数字为 flex-grow 值，而flex-shrink 取 1，flex-basis取 0%  也就是说flex: 1是flex: 1 1 0%的简写

当flex取值为一个长度或者是一个百分比时，则视为 flex-basis 值，而flex-grow 、flex-shrink 取 1。即flex: 100px等同于flex: 1 1 100px

4.6.align-self

align-self属性设定单个项目的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。如果没有父元素，则等同于stretch（默认）

align-self: auto | flex-start | flex-end | center | baseline | stretch

 该属性除了auto，其他都与align-items属性完全一致。