【web前端】十分钟彻底弄懂 flex 布局

用六个字概括 flex 布局属性：简单、方便、快速。

一、简介

flex（flexible box：弹性布局盒模型），是 2009 年 w3c 提出的一种可以简洁、快速对页面进行弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持：

browser support

其中在webkit内核的浏览器中使用时，必须加上 -webkit- 前缀。

flex container

使用 flex 布局的容器（flex container），它内部的元素自动成为 flex 项目（flex item）。容器拥有 两根 隐形的轴，水平的 主轴（main axis），和竖直的 交叉轴（cross axis）。

主轴开始的位置，即主轴与左边框的交点，称为 main start；主轴结束的位置称为 main end；交叉轴开始的位置，即交叉轴与上边框的交点，称为 cross start；交叉轴结束的位置称为 cross end。

item 按主轴或交叉轴排列，item 在主轴方向上占据的宽度称为 main size，在交叉轴方向上占据的宽度称为 cross size。

注意：使用 flex 容器内元素，即 flex item 的 float，clear、vertical-align 属性将失效。

二、属性总结表

	属性名称	属性意义	属性可能的值
容器属性	flex-direction	决定 item 排列方向	row（默认，左右），row-reverse（右左），column（上下），column-reverse（下上）
	flex-wrap	排列不下时，item 如何换行	nowrap（默认，不换行），wrap（换行），wrap-reverse（返向换行）
	flex-flow	flex-direction 和 flex-wrap 的集合简写	row nowrap（默认，其它效果按照上方设置即可）
	justify-content	item 在主轴上的对齐方式	flex-start（首对齐）、flex-end（尾对齐）、center（居中对齐）、space-between（两端对齐）、space-around（沿轴线均匀分布）
	align-items	item 在交叉轴上的对齐方式	flex-start、flex-end、center、baseline（item 第一行文字底部对齐）、stretch（item 未设置高度时，item 将和容器等高对齐）
	align-content	多根轴线的对齐方式	flex-start、flex-end、center、space-between、space-around、stretch
item 的属性	order	定义 item 的排列顺序	整数，默认为 0，越小越靠前
	flex-grow	当有多余空间时，item 的放大比例	整数，默认为 0，即有多余空间时也不放大
	flex-shrink	当空间不足时，item 的缩小比例	整数，默认为 1，即空间不足时缩小
	flex-basis	item 在主轴上占据的空间	整数，长度值，默认为 auto
	flex	grow，shrink，basis 的简写	默认值为 0 1 auto
	align-self	单个 item 独特的对齐方式	同 align-items，可覆盖 align-items 属性

三、容器属性详解

3.1 flex-direction

flex-direction

flex-direction 决定主轴的方向，即项目排列的方向。有四个可能的值：row（默认） | row-reverse | column | column-reverse。

• row：默认情况，主轴为水平方向，item 沿主轴从左至右排列
• column：主轴变为竖直方向，item 沿主轴从上至下排列
• row-reverse：主轴水平，item 从右至左排列（与 row 相反）
• column-reverse：主轴竖直，item 从下至上排列（与 column 相反）

3.2 flex-wrap

flex-wrap

flex-wrap 决定项目在盒中无法撑满的情况下，是否换行。

• nowrap：默认情况，自动缩小项目的宽度，不换行
• wrap：换行，且第一行在上方
• wrap-reverse：换行，第一行在下面（与 wrap 相反）

3.3 flex-flow

flex-flow

它是 flex-direction 和 flex-wrap 的集合简写形式，如：row wrap | column wrap-reverse 等。默认值为 row nowrap，即横向排列 不换行。

3.4 justify-content

row

justify-content

决定 item 在横向主轴上的对齐方式，可能的值有 flex-start（默认），flex-end，center，space-between，space-around。当为横向主轴时，具体含义如下：

• flex-start：左对齐
• flex-end：右对齐
• center：居中对齐
• space- between：两端对齐
• space-around：沿轴线均匀分布
• space-evenly：左右均匀分布

column

justify-content

决定 item 在纵向主轴上的对齐方式，可能的值有 flex-start（默认），flex-end，center，space-between，space-around。当为纵向主轴时，具体含义如下：

• flex-start：上对齐
• flex-end：下对齐
• center：居中对齐
• space- between：两端对齐
• space-around：沿轴线均匀分布
• space-evenly：上下均匀分布

补充知识点：space-around 和 space-evenly 的区别

space-around 和 space-evenly

3.5 align-items

row

align-items

决定了 item 在横向主轴上的对齐方式，可能的值有 flex-start | flex-end | center | stretch | baseline ，当为横向主轴时，其具体含义为：

• flex-start：顶端对齐
• flex-end：底部对齐
• center：竖直方向上居中对齐
• stretch：当 item 未设置高度时，item 将和容器等高对齐
• baseline：item 第一行文字的底部对齐

column

align-items

决定了 item 在纵向主轴上的对齐方式，可能的值有 flex-start | flex-end | center | stretch | baseline ，当为纵向主轴时，其具体含义为：

• flex-start：左侧对齐
• flex-end：右侧对齐
• center：水平方向上居中对齐
• stretch：当 item 未设置宽度时，item 将和容器等宽对齐

3.6 align-content

align-content

该属性定义了当有多根主轴时，即 item 不止一行时，多行在交叉轴上的对齐方式。注意当有多行时，定义了 align-content 后，align-items 属性将失效。align-content 可能值含义如下（假设主轴为垂直方向）：

• flex-start：上对齐
• flex-end：下对齐
• center：垂直居中对齐
• space- between：沿轴线两端对齐
• space-around：沿轴线均匀分布
• stretch：各行将根据其 flex-grow 值伸展以充分占据剩余空间

四、item属性详述

item 的属性在 item 的 style 中设置，item 共有如下六种属性：

4.1 order

order

order 的值是整数，默认为 0，整数越小，item 排列越靠前，如上图所示。

4.2 flex-grow

flex-grow

它定义了当 flex 容器有多余空间时，item 是否放大。默认值为 0，即当有多余空间时也不放大；可能的值为整数，表示不同 item 的放大比例。

4.3 flex-shrink

flex-shrink

定义了当容器空间不足时，item 是否缩小。默认值为 1，表示当空间不足时，item 自动缩小，其可能的值为整数，表示不同 item 的缩小比例。

4.4 flex-basis

flex-basis

表示 item 在主轴上占据的空间，默认值为 auto。

4.5 flex

flex

flex 属性是 flex-grow、flex-shrink 和 flex-basis 三属性的简写总和。

4.6 align-self

align-self

align-self 属性允许 item 有自己独特的在交叉轴上的对齐方式，它有六个可能的值，默认值为 auto。

• auto：和父元素 align-self 的值一致
• flex-start：顶端对齐
• flex-end：底部对齐
• center：竖直方向上居中对齐
• baseline：item 第一行文字的底部对齐
• stretch：当 item 未设置高度时，item 将和容器等高对齐