Flex 布局教程：语法篇

原创

于 2025-06-04 09:27:03 发布 · 824 阅读

·

15

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#css #css3 #html

首先，先上图。先画了一个思维导图。只是为了总结下，一眼可以看到。

详情总结

一、Flex 布局概述

定义：Flex 是 Flexible Box 的缩写，意为 “弹性布局”，为盒状模型提供最大灵活性。
启用方式
- 容器设置display: flex或display: inline-flex。
- Webkit 内核浏览器需加-webkit-前缀，如display: -webkit-flex。
影响：设为 Flex 布局后，子元素的float、clear和vertical-align属性失效。

二、基本概念

<

概念	说明
Flex 容器	采用 Flex 布局的元素，简称 “容器”
Flex 项目	容器的子元素，简称 “项目”
主轴	水平方向的轴，默认起点在左端
交叉轴	垂直方向的轴，默认起点在上沿
轴位置

最低0.47元/天解锁文章

200万优质内容无限畅学