Flex是什么|CSS flex布局核心概念与实战用法全解析

接下来要理解主轴和侧轴：容器里有两条看不见的线，主轴是项目排列的“主方向”（默认是水平向左，也就是row），侧轴是“辅助对齐的方向”（默认是垂直向下）。比如你想让项目垂直排列，就把主轴改成column（垂直方向），这时侧轴变成水平方向——是不是像“调整排列的坐标轴”？我当时帮朋友调垂直的服务列表，原来用margin-top一个个推，后来改成flex-direction: column，项目自动垂直排，省了一堆代码。

再讲容器的核心属性——这些是Flex的“操控按钮”，记牢了就能解决80%的布局问题：

还有项目的弹性属性——flex-grow（剩余空间放大比例）、flex-shrink（空间不够时缩小比例）、flex-basis（初始宽度），这三个可以合并写成flex: 1 1 auto（比如flex: 1就是1 1 0%，意思是“平分剩余空间”）。比如你做卡片布局，给每个卡片加flex: 1 1 300px，它就会“初始宽300px，能放大也能缩小”，完美适应不同屏幕。

Flex实战——这些场景用它准没错，我帮人调过几十次

光懂概念没用，得落地到具体场景。我整理了三个最常用的实战案例，都是我帮人调过的，亲测有效：

导航栏是每个网站的“门面”，最常见的需求是“logo在左、菜单在右”+“垂直居中”。用Flex的步骤超简单：

如果菜单里的li要水平排列，给菜单容器（比如ul.menu）也加display: flex，li之间加margin-left: 20px就行。我帮美妆博主做导航栏时，她原来用float: left和float: right，手机端菜单会“掉”下来；用Flex加媒体查询，手机端把flex-direction改成column，菜单就垂直排列了，完全不用调margin。

卡片布局比如商品列表、博客文章，最烦的是“每个卡片高度不一致”。用Flex的解决办法：

我做电商页面时，原来的商品卡片有的标题长、有的短，高度参差不齐；用了这个方法后，所有卡片自动“拉平”，客户看了直接说“比之前专业多了”。更省心的是，加新卡片时不用改任何代码，容器会自动分配空间——这就是Flex“弹性”的核心优势。

现在做网站必须适配手机，Flex在响应式上特好用。比如服务介绍板块，电脑端三个服务项水平排，手机端垂直排：

我帮旅游网站做服务板块时，原来用float加media query，改起来要调width和margin；用Flex后，只需要改一个flex-direction，手机端适配完美搞定，省了至少两小时。

附：我常用的Flex属性表，查起来比翻MDN快

为了方便你对照，我整理了平时最常用的Flex属性，直接拿去用：

最后想对你说：Flex没你想的那么复杂，先从“导航栏”或“卡片布局”开始试，按我讲的步骤来——比如先给容器加display: flex，再调justify-content和align-items，慢慢就摸透了。我当时学Flex时，也是从这些小场景入手，后来帮人调布局时，基本不用查文档就能搞定。

如果你试了之后有问题，比如“为什么卡片没换行？”“导航栏垂直居中没生效？”，欢迎留言问我——我帮你一起排查。 好的布局工具，就是要让你少写代码、多解决问题。赶紧去试试吧，我等着你的好消息！

本文常见问题（FAQ）

Flex容器和Flex项目是什么关系？

简单说，你给一个div加display: flex，这个div就变成Flex容器了，里面的直接子元素（比如img、ul、p这些）就是Flex项目。比如做导航栏时，用