Flex布局不求人：一学就会的现代网页弹性布局秘籍！

路明非Ricardo
1,117 阅读4分钟

你是否还在为页面布局发愁？float、inline-block总是让你头大？其实，CSS弹性布局（Flexbox）早已成为现代网页布局的主流神器！只需几行代码，就能轻松实现自适应、多栏、居中等各种复杂布局。今天就带你用最通俗的方式，从原理到实战，彻底搞懂Flex弹性布局！

一、Flex弹性布局的基本概念

  • Flexbox（弹性盒子）是一种简便、完整、响应式的页面布局方案。
  • 只需给父容器加上display: flex，子元素就能自动变成“弹性小盒子”，灵活排列。

二、主轴、交叉轴与子元素的排列

1. 主轴与交叉轴

  • 弹性容器有主轴（默认水平方向）和交叉轴（默认垂直方向）之分。
  • 子元素默认沿主轴排列。

2. 子元素的核心属性

  • order：改变排列顺序，值越小越靠前。
  • flex-grow：允许子元素放大（默认0）。
  • flex-shrink：允许子元素缩小（默认1）。
  • flex-basis：设置初始尺寸。
  • flex：flex-grow flex-shrink flex-basis的简写。
  • align-self：单独设置某个子元素的对齐方式。

三、弹性容器子元素属性详解

1. order —— 控制排列顺序

代码示例：

<ul>
  <li class="item1">1</li>
  <li class="item2">2</li>
  <li class="item3">3</li>
</ul>

ul {
  display: flex;
}
.item2 {
  order: -1;
}

说明：
.item2会被排到最前面。

浏览器效果图：

image.png

2. flex-grow —— 控制放大比例

代码示例：

ul {
  display: flex;
}
.item2 {
  flex-grow: 1;
}

说明：
.item2将具有放大功能。

浏览器效果图：

flex-grow.gif

3. flex-shrink —— 控制缩小比例

代码示例：

ul {
  display: flex;
  width: 400px;
}
li {
  width: 200px;
  flex-shrink: 1;
}
.item2 {
  flex-shrink: 0;
}

说明：
当父容器变窄时，.item2不会被缩小。

浏览器效果图：

flex -shrink.gif

4. flex-basis —— 设置初始尺寸

代码示例：

ul {
  display: flex;
}
li {
  width: 200px;
}
item2 {
  flex-basis: 100px
}

说明：
每个子项设置宽度为200px, item2 设置初始宽度100px

浏览器效果图：

image.png

5. flex —— 简写属性

代码示例：

li {
  flex: 1 0 100px;
}

说明：
等价于flex-grow: 1; flex-shrink: 0; flex-basis: 100px;。

浏览器效果图：

flex.gif

6. align-self —— 单独设置对齐方式

代码示例：

ul {
  display: flex;
  align-items: flex-start;
  height: 200px;
}
.item4 {
  align-self: flex-end;
  height: 50px;
}

说明：
.item4会在交叉轴底部对齐，其余子项顶部对齐。

浏览器效果图：

image.png

四、弹性容器本身属性详解

弹性容器的常用属性

  • justify-content：主轴方向上的对齐方式（如center、space-between等）
  • align-items：交叉轴方向上的对齐方式（如center、flex-start等）
  • flex-direction：主轴方向（row/column）
  • flex-wrap：是否换行
  • flex-flow：flex-direction和flex-wrap的简写
  • align-content：多根主轴时，交叉轴上的对齐方式

1. justify-content —— 主轴对齐方式

代码示例：

ul {
  display: flex;
  justify-content: center;
}

说明：
所有子项在主轴（水平方向）居中排列。

浏览器效果图：
image.png

2. align-items —— 交叉轴对齐方式

代码示例：

ul {
  display: flex;
  align-items: center;
  height: 200px;
}

说明：
所有子项在交叉轴（垂直方向）居中。

浏览器效果图：

image.png

3. flex-direction —— 主轴方向

代码示例：

ul {
  display: flex;
  flex-direction: column;
}

说明：
主轴变为垂直方向，子项竖直排列。

浏览器效果图：

image.png

4. flex-wrap —— 是否换行

代码示例：

ul {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
}
li {
  width: 200px;
}

说明：
子项超出父容器宽度时自动换行。

浏览器效果图：

image.png

5. flex-flow —— 主轴方向和换行方式简写

代码示例：

ul {
  display: flex;
  flex-flow: row wrap;
}

说明：
等价于flex-direction: row; flex-wrap: wrap;。

浏览器效果图：

image.png

6. align-content —— 多行交叉轴对齐

代码示例：

ul {
  display: flex;
  flex-wrap: wrap;
  height: 400px;
  align-content: center;
}

说明：
多行内容在交叉轴方向居中。

浏览器效果图：

image.png

五、实战：多栏布局的实现

1. 两栏布局

  • 左侧固定宽度，右侧自适应
  • 只需设置左侧flex: 0 0 200px，右侧flex: 1
<div class="page">
  <div class="menu"></div>
  <div class="content"></div>
</div>

.page {
  display: flex;
  height: 100vh;
}
.menu {
  flex: 0 0 200px;
  background-color: #2e3fc1;
}
.content {
  flex: 1;
  background-color: #26bd95;
}

image.png

2. 三栏布局

  • 左右两侧固定宽度，中间自适应
  • 利用order属性调整顺序
<div class="page">
  <div class="content"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

.page {
  display: flex;
  height: 100vh;
}
.left {
  width: 200px;
  background-color: #25e45e;
  order: -1;
}
.content {
  flex: 1;
  background-color: #df1b28;
}
.right {
  width: 200px;
  background-color: #261dcc;
}

image.png

六、常见问题与实用技巧

1. 如何让子元素等宽/自适应？

  • 给所有子元素flex: 1即可自动等分剩余空间。

2. 如何让某个子元素不缩小？

  • 设置flex-shrink: 0。

3. 如何让某个子元素单独对齐？

  • 用align-self单独设置。

七、总结

Flex弹性布局极大简化了页面布局的难度，是现代前端开发的必备技能。掌握主轴、交叉轴、flex属性和多栏布局技巧，能让你轻松应对各种响应式页面需求。

avatar
文章
阅读
粉丝