Flexbox 布局（Flexible Box Layout），是 CSS3 新增的一种布局方式，它可以方便的进行网页布局以及响应式设计。Flexbox 布局不仅提供了更为简单的成员排列方式，还可以解决众多的布局问题。如果你想提高你在前端开发中的布局技能，那么就需要学习这个新的布局方式。
Flexbox 概述
Flexbox 布局模型，提供了一种更为灵活、更为简单的布局方式，可以轻松地控制子元素在容器中的布局。Flexbox 通过在容器上定义 display: flex，将一个元素变为 Flexbox 容器，通过对子元素定义属性，即可轻松地定义布局。
Flexbox 的属性
在使用 Flexbox 布局之前，我们需要先了解一些关于 Flexbox 的基本属性。
容器属性
以下是容器属性：
display: 这是设置容器为 Flexbox 容器的属性。容器用display: flex定义。flex-direction: 决定主轴的方向。取值有row（默认，从左向右）、row-reverse（从右向左）、column（从上到下）、column-reverse（从下到上）。justify-content: 决定了主轴上的对齐方式。默认为flex-start，也可以选择flex-end（右对齐）、center（居中）、space-between（两端对齐，项目之间的间隔相等）、space-around（每个项目底部、顶部间隔相等）。align-items: 决定了交叉轴上的对齐方式。默认为stretch，也可以选择flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（基线对齐）。flex-wrap: 控制 Flex 容器内部的子元素是否换行。有nowrap（默认，不换行）、wrap（换行）、wrap-reverse（换行并且逆序排列）。
项目属性
以下是项目属性：
order: 用于控制项目的排列顺序。数值越小，排列越靠前。默认为0。flex-grow: 决定项目在可用空间内的扩展比例，默认为0。flex-shrink: 决定项目在空间不足时的缩小比例，默认为1。flex-basis: 决定了项目在分配多余空间之前，占据的空间，默认为auto（项目的本来大小）。flex: 是flex-grow、flex-shrink和flex-basis三个属性的缩写。为此属性提供一个非 0 值即可让项目扩展。align-self: 设置单个项目在交叉轴上的对齐方式。
构建 Flexbox 布局
创建 Flex 容器
要使用 Flexbox 布局，首先需要将元素的 display 属性设置为 flex，就可以将这个元素变为 Flexbox 容器。例如：
.container {
display: flex;
}容器的主要轴
Flexbox 布局有一个主轴（Main Axis），默认情况下，主轴是横向的，从左到右排列。可以通过 flex-direction 属性来改变主轴方向。例如，将主轴方向改为纵向：
.container {
display: flex;
flex-direction: column;
}容器的对齐方式
在 Flexbox 布局中，justify-content 属性用于定义主轴上的对齐方式，取值可以是 flex-start（默认值，左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐）、space-around（每个项目周围的空白均相等）。例如：
.container {
display: flex;
justify-content: center;
}效果图：
容器的交叉轴
在 Flexbox 布局中，容器的交叉轴是相对于主轴的。默认情况下，交叉轴是垂直的。可以通过 flex-direction 属性来改变主轴方向。例如，将交叉轴方向改为水平：
.container {
display: flex;
flex-direction: column;
align-items: center;
}项目的顺序
在 Flexbox 布局中，order 属性可以用来控制项目的顺序，数值越小，排列越靠前。默认情况下，项目的 order 值为 0，可以为其设置其他值。例如：
.item {
order: 1;
}项目的扩展
在 Flexbox 布局中，flex-grow 属性指定项目在可用空间内的扩展比例，默认为 0。例如：
.item {
flex-grow: 1;
}项目的收缩
在 Flexbox 布局中，flex-shrink 属性指定项目在空间不足时的缩小比例，默认为 1。例如：
.item {
flex-shrink: 1;
}项目的大小
在 Flexbox 布局中，flex-basis 属性决定了项目在分配多余空间之前占据的空间，默认为 auto，即项目本来的大小。
.item {
flex-basis: 100px;
}项目的缩写
flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的缩写。例如：
.item {
flex: 1 0 100px;
}对项目的对齐
在 Flexbox 布局中，align-self 属性可以用来设置单个项目在交叉轴上的对齐方式。默认情况下，align-items 属性设置为 stretch。例如，可以对一部分项目设置 align-self 属性来进行对齐。
.item:nth-child(3) {
align-self: flex-end;
}示例代码
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- ------------ ------- ---------- ----- ---------- ------ ------- - ----- - ----- - ----- - - ----------- - ------ ---------- ----------- - ------ ----------------- ----- -------------- ---- -------- ----- -------------- ----- -
总结
Flexbox 布局，可以轻松地进行网页布局以及响应式设计。上述这些属性中，虽然每个属性都很重要，但是 align-items、justify-content、flex-direction 这三个属性对于我们掌握 Flexbox 布局而言，是至关重要的。同时，在实际项目实践中，我们还需要根据不同的需求，灵活使用其他的属性，例如 flex-wrap、order、align-self 等，才能让 Flexbox 布局技术真正发挥出来，从而达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6455f56a968c7c53b0948f83