零基础网页开发11（Flexbox弹性盒子）

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2025年7月19日 18:39 本文热度 8

本期我们将学习排版语法。其实我们之前已经接触过排版语法了，比如position语法；此次我们要学的是更新、更简单灵活的排版语法---Flexbox（弹性盒子）

⚙️ 一、Flexbox语法

Flexbox是一种一维布局模型，用于在容器内高效分配空间、对齐项目，尤其适合响应式设计。

它的使用方式，是在HTML的父元素中，写入display:flex;的语法

CSS示意代码（父元素）

.container {  display: flex | inline-flex;          /* 启用弹性容器 */  flex-direction: row | column;         /* 主轴方向：水平/垂直 */  flex-wrap: nowrap | wrap;             /* 是否换行 */  justify-content: flex-start | center | space-between; /* 主轴对齐 */  align-items: flex-start | center | stretch; /* 交叉轴对齐 */  align-content: center | space-around; /* 多轴线对齐 */}

写入了display:flex;的语法，就可以让子元素产生各种排列的方式：

水平置中

伸展至父元素两侧

均分子元素以外的空隙

垂直居中

示例：水平居中布局

.container {  display: flex;  justify-content: center; /* 主轴居中 */  align-items: center;     /* 交叉轴居中 */}

🔧 二、Flex-direction

flex-direction 是 CSS Flexbox 布局中的核心属性，用于定义弹性容器的主轴方向，控制内部项目的排列方式。

这样讲，你可能还会有点迷糊，我一开始也是这样。接下来几张图，会让你明明白白这个direction到底是干嘛地。

当你写入display:flex，会发现里面的子元素突然成横向排列

如果要维持原本的纵向堆叠，这就轮到我们的flex-direction登场了。只需在CSS中指明flex的方向为column（栏）

此时各项子元素是纵向堆叠了，可是堆在边边角角也太不美观了。别担心别担心，水平对齐align-items来救急！

嗯，不错这下顺眼多了，但水平都居中对齐了，垂直⊥能不能也整个居中对齐？有的有的，垂直对齐为justify-content：

flex-direction 的取值及效果

属性值	主轴方向	排列顺序	适用场景
row（默认值）	水平方向	从左到右 →	导航栏、水平菜单、按钮组
row-reverse	水平方向	从右到左 ←	RTL 语言布局、倒序显示
column	垂直方向	从上到下 ↓	竖向菜单、侧边栏、垂直列表
column-reverse	垂直方向	从下到上 ↑	倒序内容（如聊天记录从底部开始）

示例代码：

.container {  display: flex;  flex-direction: row; /* 水平排列（默认） */}.reverse-container {  flex-direction: row-reverse; /* 水平反向排列 */}.vertical-container {  flex-direction: column; /* 垂直排列 */}

三、总结

好啦，这期内容就到这里啦。本期我们主要讲解了Flexbox（弹性盒子）布局模型，它与Position（定位）是CSS中两种核心布局机制，分别适用于不同场景。

阅读原文：原文链接

该文章在 2025/7/21 10:50:43 编辑过

关键字查询

网页

开发

基础

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。