flex布局教程

flex 基本概念

flex布局是W3C在2009年提出了一种弹性的自适应布局方案，能够简便、完整、响应式地实现各类页面布局。目前，它已经获得了全部浏览器的支持。

flex的核心概念是 轴和 容器。其中容器包裹在外层的是父容器，内层的是子容器。容器默认存在两根轴：水平的主轴 main axis和垂直的交叉轴 cross axis。主轴的开始位置与边框的交叉点是 main start，结束位置是 main end；交叉轴的开始位置是 cross start，结束位置是 cross end。子容器默认沿主轴排列。每一个字容器占据的主轴空间是 main size，占据的交叉轴空间是 cross size。 使用 flex实现水平垂直居中。

.container {
	display: flex;
	justify-content: center;
	items-align: center;
}
复制代码

父容器属性

display: flex|inline-flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <‘flex-direction’> || <‘flex-wrap’>;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
复制代码

display

设置容器为flex布局模式，其中flex为块级布局，inline-flex为行内布局。

.container {
	display: flex;
}
复制代码

flex-direction

flex-direction属性决定了主轴的方向。默认方向是row便是left to right。

.container {
	flex-direction: row | row-reverse | column | column-reverse;
}
复制代码

flex-wrap

flex-wrap属性决定了当子元素沿轴线排列不下是否换行排列。

.container {
	flex-wrap: nowrap | wrap | wrap-reverse;
}
复制代码

• nowrap：不含行沿轴线排列。
• wrap：从上到下换行排列。
• wrap-reverse：从下到上换行排列。

flex-flow

flex-flow是属性flex-direction和flex-wrap的简写形式。

.container {
	flex-flow: <‘flex-direction’> || <‘flex-wrap’>;
}
复制代码

justify-content

justify-content属性决定了子元素沿主轴的对其方式。

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

• flex-start（默认值）：沿main start开始方向左对齐。
• flex-end：沿main end开始方向右对齐。
• center：沿main axis中间居中。
• space-between：沿main axis两端对其，项目之间的间隔都相等。
• space-around：沿main axis均匀分布，每一个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍。

align-items

align-items属性决定了子元素沿交叉轴的对其方式。

.container {
	align-items: flex-start | flex-end | center | baseline | stretch;
}
复制代码

• flex-start：cros start对齐。
• flex-end：cros end对齐。
• center：cros axis中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：若是项目未设置高度或设为auto，将占满整个容器的高度。

align-content

align-content属性决定了多根轴线的对齐方式。

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

• flex-start：与cros axis的起点对齐。
• flex-end：与cros axis的终点对齐。
• center：与cros axis的中点对齐。
• space-between：与cros axis两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。因此，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。

子容器属性

order: <integer>;
flex-grow: <number>;
flex-shrink: <number>;
flex-basis: <length> | auto;
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
align-self: auto | flex-start | flex-end | center | baseline | stretch;
复制代码

order

order是属性决定了子元素的排列顺序，数字越小的在前。

.item {
	order: <integer>;
}
复制代码

flex-grow

flex-grow是属性决定当有空余空间时子元素的放大比例。

.item {
	flex-grow: <number>;
}
复制代码

flex-shrink

flex-shrink是属性决定当空间不足时子元素的缩小比例。

.item {
	flex-shrink: <number>;
}
复制代码

flex-basis

flex-basis是属性决定计算剩余空间以前子元素默认的大小。

.item {
	flex-basis: <length> | auto;
}
复制代码

flex

flex-flow是属性flex-grow、flex-shrink、flex-basis的简写形式。

.item {
	flex-flow: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
复制代码

• none：0 0 auto
• initial：0 1 auto
• auto：1 1 auto

flex-self

flex-self属性决定了单个子元素与其余子元素的对齐方式。

.item {
	flex-self: auto | flex-start | flex-end | center | baseline | stretch;
}
复制代码