HTML5怎么使用Flex布局是前端开发中非常基础也极其实用的一个问题。Flex布局全称是弹性盒布局（Flexible Box Layout），它通过在容器上启用弹性盒模型，让内部子元素的排列、对齐和空间分配变得更加简单可控，不需要再大量依赖浮动或定位。
一、如何创建Flex容器
在HTML5文档中，只需要对一个块级或行内元素设置display: flex或者display: inline-flex，该元素就成为了Flex容器，它的直接子元素自动变为Flex项目。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Flex示例</title>
<style>
.box {
display: flex; /* 创建Flex容器 */
background: #f0f0f0;
}
.item {
width: 80px;
height: 80px;
background: #409eff;
margin: 5px;
}
</style>
</head>
<body>
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
二、Flex容器常用属性
1. flex-direction
决定主轴方向，也就是项目排列的方向，可选值有row、row-reverse、column、column-reverse。
2. flex-wrap
控制项目是否换行，默认nowrap不换行，可设为wrap允许换行。
3. justify-content
定义项目在主轴上的对齐方式，例如flex-start、center、space-between等。
4. align-items
定义项目在交叉轴上的对齐方式，如stretch、center、flex-end。
| 属性 | 作用 | 常用值 |
|---|---|---|
| flex-direction | 设置主轴方向 | row, column |
| flex-wrap | 控制换行 | nowrap, wrap |
| justify-content | 主轴对齐 | flex-start, center, space-between |
| align-items | 交叉轴对齐 | stretch, center |
三、Flex项目常用属性
1. flex-grow
定义项目的放大比例，默认为0，即不放大。
2. flex-shrink
定义项目的缩小比例，默认为1，空间不足时会缩小。
3. flex-basis
定义在分配多余空间之前项目占用的主轴尺寸。
4. flex
是flex-grow、flex-shrink、flex-basis的简写，推荐直接使用。
5. align-self
允许单个项目与其他项目不一样的对齐方式，可覆盖align-items。
/* 让第二个项目自动占据剩余空间 */
.item:nth-child(2) {
flex: 1;
background: #67c23a;
}
四、完整示例
下面示例演示了一个横向导航条，其中品牌区域固定宽度，菜单区域占据剩余空间并居中排列。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>导航条Flex示例</title>
<style>
.nav {
display: flex;
align-items: center;
background: #303133;
color: #fff;
padding: 0 10px;
}
.brand {
width: 120px;
font-weight: bold;
}
.menu {
flex: 1; /* 占据剩余空间 */
display: flex;
justify-content: center; /* 菜单居中 */
}
.menu a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}
.user {
width: 80px;
text-align: right;
}
</style>
</head>
<body>
<div class="nav">
<div class="brand">我的网站</div>
<div class="menu">
<a href="https://ipipp.com">首页</a>
<a href="https://ipipp.com">文章</a>
<a href="https://ipipp.com">关于</a>
</div>
<div class="user">登录</div>
</div>
</body>
</html>
五、小结
HTML5使用Flex布局的核心就是先通过display: flex建立弹性容器，再利用容器属性和项目属性配合完成各种排版。掌握flex-direction、justify-content、align-items以及flex简写，就能解决绝大多数网页布局问题。建议多写几个不同场景的示例，比如卡片列表、底部工具栏，来巩固对Flex布局的理解。
HTML5Flex布局flex_containerflex_itemcss修改时间：2026-07-25 04:39:13