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

文章目录▼CloseOpen

• 先把Flex的核心概念掰碎了讲——其实就两层逻辑
• Flex实战——这些场景用它准没错，我帮人调过几十次
• 附：我常用的Flex属性表，查起来比翻MDN快
  • 本文常见问题（FAQ）
  • Flex容器和Flex项目是什么关系？
  • 主轴和侧轴怎么区分？我总搞混
  • 用Flex做卡片布局，为什么有的卡片高度不一致？
  • 导航栏想让logo左、菜单右，用Flex怎么实现？
  • 响应式布局用Flex怎么适配手机端？比如电脑端水平排，手机端垂直排

这篇文章会帮你彻底理清Flex的真面目：从“Flex布局是什么”的基础定义讲起，拆解它的核心概念（比如Flex容器与项目、主轴与侧轴的关系），再到实战中最常用的技巧——比如如何用justify-content让元素水平对齐，用align-items搞定垂直居中，用flex-wrap解决换行问题，甚至用Flex实现响应式的导航栏、卡片布局。不管你是刚学CSS的新手，还是想补全布局知识的开发者，这里都能找到你需要的答案——读完这篇，你会发现，原来搞定复杂布局可以这么简单。

你肯定遇到过这种情况：做网页布局时，想让元素水平居中总调不对margin，用float排导航栏总担心“清除浮动”，或者手机端适配时内容挤成一团——这些让人头大的问题，我帮朋友调过几十次，最后发现CSS Flex布局是最省心的解决方案。去年帮一个美食博主改首页，他原来用float排菜品卡片，每加一个新卡片就得调margin，手机端看全乱了；我用Flex重写后，卡片自动对齐、自适应屏幕，他看完直说“比之前专业十倍”。今天就把我摸透的Flex逻辑和实战技巧分享给你，不管你是刚学CSS的新手，还是想补全布局知识的老司机，都能跟着学会。

先把Flex的核心概念掰碎了讲——其实就两层逻辑

要学Flex，先搞懂两个最基础的词：Flex容器和Flex项目。简单说，你给一个div加display: flex，这个div就变成了“Flex容器”，里面的直接子元素（比如img、ul、p）就是“Flex项目”。比如你做导航栏，用

包着logo和菜单，给.nav加display: flex，那.nav是容器，logo和菜单就是项目——这一步是Flex布局的“开关”，没开这个开关，后面的属性都没用。

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

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

flex-direction：改主轴方向，比如row（水平，默认）、column（垂直）、row-reverse（水平反向）、column-reverse（垂直反向）。比如导航栏用row，垂直列表用column。

justify-content：控制项目沿主轴的对齐方式，比如flex-start（靠左/上）、center（居中）、space-between（两端对齐，中间留空）、space-around（每个项目两边留相等空）。我调导航栏时，用justify-content: space-between让logo靠左、菜单靠右，一分钟就搞定了之前用float调半小时的问题。

align-items：控制项目沿侧轴的对齐方式，比如flex-start（靠上/左）、center（垂直居中）、stretch（默认，项目拉伸填满侧轴高度）。比如卡片布局用stretch，所有卡片自动高度一致，不管里面的内容多少。

flex-wrap：允许项目换行，默认nowrap（不换行，挤在一起），改成wrap就能让卡片自动排到下一行——这是解决“自适应换行”的关键。

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

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

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

导航栏：5分钟搞定“logo左、菜单右”的对齐

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

第一步：给导航栏容器加display: flex（变成Flex容器）；

第二步：用justify-content: space-between——让logo和菜单“贴”在容器两端；

第三步：用align-items: center——让logo和菜单垂直居中（不管它们的高度多少）。

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

卡片布局：自动对齐+自适应换行，再也不用调height

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

给卡片容器加display: flex+flex-wrap: wrap（允许换行）；

给每个卡片加flex: 1 1 300px——意思是“初始宽300px，能放大（占剩余空间）、能缩小（不够时压缩）”；

不用写height，因为align-items: stretch（默认）会让所有卡片高度一致，不管里面的内容多少。

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

响应式布局：电脑端水平、手机端垂直，只需改一个属性

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

第一步：给服务容器加display: flex；

第二步：电脑端用flex-direction: row，每个服务项加flex: 1（平分空间）；

第三步：写媒体查询（比如@media (max-width: 768px)），把flex-direction改成column，每个服务项的flex改成auto——手机端就垂直排列了。

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

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

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

属性名称	作用说明	常用值	示例场景
display	开启Flex容器	flex、inline-flex	所有Flex布局的起点
justify-content	主轴对齐方式	flex-start、center、space-between	导航栏两端对齐、内容居中
align-items	侧轴对齐方式	center、stretch、baseline	卡片高度对齐、垂直居中
flex-wrap	控制项目换行	wrap、nowrap	商品列表、卡片布局
flex	项目弹性属性（合并grow/shrink/basis）	1 1 auto、0 0 300px	平分空间、自适应宽度

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

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

---

本文常见问题（FAQ）

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

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

包着logo和菜单，给.nav加display:flex，那.nav是容器，logo和菜单就是项目——这一步是Flex布局的“开关”，没开这个开关，后面的属性都没用。

我帮美食博主改首页时，原来用float排菜品卡片，每加新卡片都要调margin，后来把包卡片的div改成Flex容器，里面的卡片自动变成项目，排得整整齐齐的，省了好多事。

主轴和侧轴怎么区分？我总搞混

主轴是项目排列的“主方向”，默认是水平向左（也就是row），比如导航栏里的项目默认水平排；侧轴是“辅助对齐的方向”，默认是垂直向下，比如想让项目垂直居中，就得调侧轴的属性。

要是你想让项目垂直排列，比如做垂直的服务列表，就把主轴改成column（垂直方向），这时候侧轴就变成水平方向了——是不是像调整排列的“坐标轴”？我之前帮朋友调垂直列表，原来用margin-top一个个推，改成column后自动垂直排，超省心。

用Flex做卡片布局，为什么有的卡片高度不一致？

这是因为你没用到Flex的默认属性——align-items: stretch。Flex容器默认会让项目沿侧轴“拉伸”，也就是所有项目的高度自动和最高的那个一致，不用你写height。

我做电商页面时，原来的商品卡片有的标题长、有的短，高度参差不齐，后来给卡片容器加了display:flex，没改别的，所有卡片自动“拉平”了，客户看了直说比之前专业。要是你遇到高度不一致的情况，先检查下容器有没有加align-items:stretch（其实默认就有，不用额外写）。

导航栏想让logo左、菜单右，用Flex怎么实现？

两步就能搞定：首先给导航栏容器加display: flex，然后加justify-content: space-between——这个属性会让容器里的项目“两端对齐”，logo靠左、菜单靠右；再加上align-items: center，就能让logo和菜单垂直居中，不管它们的高度多少。

我帮美妆博主调导航栏时，原来用float:left和float:right，手机端菜单会“掉”下来；用Flex后，加个媒体查询，手机端把flex-direction改成column，菜单就垂直排列了，完全不用调margin，比之前省心太多。

响应式布局用Flex怎么适配手机端？比如电脑端水平排，手机端垂直排

核心就是改flex-direction属性。比如做服务介绍板块，电脑端想让三个服务项水平排，就给容器加flex-direction: row，每个服务项加flex: 1平分空间；手机端想垂直排，就写个媒体查询（比如@media (max-width: 768px)），把flex-direction改成column，每个服务项的flex改成auto就行。

我帮旅游网站做服务板块时，原来用float加media query，改起来要调width和margin；用Flex后，只需要改一个flex-direction，手机端适配就搞定了，省了至少两小时——Flex在响应式上真的特好用。