全面了解flex的用途

Flex布局，可以说是现代CSS里最常用也最实用的布局方案之一了。它解决了很多传统布局（比如浮动、定位）的痛点，尤其在做居中、等分、自适应排列这些场景时，简直不要太顺手。下面咱们就通过两个典型场景，把Flex的核心用法捋一遍。

一、利用 flex 实现水平垂直居中

先看一个最常见的需求：让一个子元素在外层容器里同时水平垂直居中。用Flex来做，可以说是“杀鸡用牛刀”但效果极好。

HTML结构：

CSS代码：

.container {
    width: 600px;
    height: 400px;
    border: 1px solid blue;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
    width: 200px;
    height: 100px;
    border: 1px red solid;
}

核心思路就两行：justify-content: center 控制主轴（默认水平方向）居中，align-items: center 控制交叉轴（默认垂直方向）居中。只要容器开启了 display: flex，子元素就能自动享受这种对齐待遇。简单、直接，还不容易出bug。

二、flex 的属性全览

Flex布局的属性其实分两类：一类写在父容器（flex container）上，控制整体排列方式；另一类写在子项（flex item）上，控制单个元素的行为。弄明白这两类，基本就掌握了Flex的八成功力。

先看一个示例HTML结构：

    
1
    
23
    
4

写在父容器（items）上的属性有6个：

• flex-direction —— 控制主轴方向，比如 row（默认）、column、row-reverse 等
• flex-wrap —— 控制是否换行，默认 nowrap，可以设为 wrap
• flex-flow —— 是 flex-direction 和 flex-wrap 的简写
• justify-content —— 主轴对齐方式，如 center、space-between、space-around 等
• align-items —— 交叉轴对齐方式，如 center、stretch、flex-start 等
• align-content —— 多行时的交叉轴对齐，类似于 justify-content 但作用在交叉轴方向上

写在子项（item）上的属性也有6个：

• order —— 控制单个项目的排列顺序，数值越小越靠前，默认0
• flex-grow —— 扩展比例，决定项目在剩余空间中的放大能力
• flex-shrink —— 收索比例，决定项目在空间不足时的缩小能力
• flex-basis —— 项目在分配空间前的初始大小
• flex —— 是 flex-grow、flex-shrink、flex-basis 的简写
• align-self —— 单独覆盖父容器的 align-items 对齐方式

这些属性搭配起来，几乎能解决所有常见的页面布局需求。刚开始记不住没关系，多用几次自然就熟悉了。关键是要理解：Flex的核心思想是“把容器当作一个弹性盒子，里面的子项可以按规则自动伸缩、排列、对齐”。掌握这个思路，比死记硬背属性名要重要得多。