flex 弹性盒布局简介 | 每天学一点flex

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 14 天，点击查看活动详情

知其所以然

在 Web 短暂的历史中，设计师用过多种不同的网页布局方式。

一开始，设计师依靠 html 表格组织内容，把页面分成多行和多列。可是，html 中的 table 标签原本就不是为页面布局而生的。

后来出现了 css 和基于浮动的布局，使用这种方法控制页面布局更简单，也更加符合逻辑。

如今，基于浮动的布局仍然是最常用的方法，而且设计师一直在改进其用法。例如，栅格系统就是创建布局的得力工具，不过其背后仍然使用的是浮动。

再往后，万维网联盟引入了 css 定位模块，可以使用相对定位和绝对定位来辅助页面的布局了。

至此，在布局的传统解决方案中，有很长一段时间都是基于盒状模型，依赖 display、position 以及 float 属性来进行布局。

但是，这种方式对于那些特殊布局非常的不方便，比如：垂直居中就不容易实现。

2009 年，W3C 提出了一种新的方案，flex 布局。

可以简便，完整，响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能了。

flex 布局已经成为当前布局的首选方案。

flex 弹性盒布局简介

flex 是 flexible box 的缩写，翻译成中文为“弹性盒子”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为弹性盒，只需要将 display 属性设置为 flex 即可，如下：

.box{
    display: flex;
}

行内元素也可以使用 flex 布局，只需要将 display 属性设置为 inline-flex 即可。如下：

.box{
    display: inline-flex;
}

注：设置为 flex 布局之后，子元素的 float，clear 和 vertical-align 属性将失效。

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

容器默认存在两根轴：**水平的主轴 main axis ** 和 垂直的交叉轴 cross axis。

主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end。交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。

学习弹性盒子，其实主要就是学习容器上面可以设置的属性，以及项目上面可以设置的属性。

这里将容器和项目上面可以设置的属性一并列举出来，方便查询。之后会对每一个属性进行详细的介绍。

容器和项目上面可以设置的属性如下表所示：

容器可设置属性：一共有 6 个属性

属性名	描述
flex-direction	设置内部项目的排列方向
flex-wrap	设置一行放不下的话是否换行
flex-flow	上面两种属性的简写，推荐使用
justify-content	项目在主轴（ x 轴）上的对齐方式
align-items	项目在交叉轴（ y 轴）上的对齐方式
align-content	有多根轴线时的对齐方式。如果项目只有一根轴线，那么该属性不起作用

项目可设置属性：一共也是 6 个属性

属性名	描述
order	项目的排列顺序，数字越小越靠前
flex-grow	项目放大的比例
flex-shrink	项目缩小的比例
flex-basis	项目占据的主轴空间
flex	flex-grow，flex-shrink 和 flex-basis 的简写，推荐使用
align-self	设置个别项目在交叉轴（ y 轴）上的对齐方式

为了演示上面的属性效果，我们首先建立一个页面，其 html 和 css 代码如下：

html 代码片段：

<!-- 容器盒子 -->
<div class="container">
    <!-- 项目盒子 -->
    <div class="one item">one</div>
    <div class="two item">two</div>
    <div class="three item">three</div>
    <div class="four item">for</div>
</div>

css 代码片段：

* {
    margin: 0;
    padding: 0;
}

/* 容器 css */
.container {
    width: 300px;
    height: 300px;
    outline: 1px solid;
    margin: 100px;
}

/* 项目 css */
.item {
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: white;
}

/* 每个项目背景颜色 */
.one {
    background-color: red;
}

.two {
    background-color: skyblue;
}

.three {
    background-color: gray;
}

.four {
    background-color: pink;
}

当前的效果如下：

接下来我们给外层的容器添加 display:flex 后，此时容器就变成了一个弹性盒子。

/* 容器 css */
.container {
    width: 300px;
    height: 300px;
    outline: 1px solid;
    margin: 100px;
    display: flex;  /* 设置该盒子为弹性盒 */
}

当我们设置外层盒子为弹性盒之后，里面的子元素排列成了一行。效果如下：