当前位置：首页 > news >正文

CSS中的Flex布局

news 2026/3/29 14:37:04

一.什么是Flex布局

Flex布局可以：“简便、完整、响应式”的实现各种页面布局

Flex是“Flexible box”的缩写，意为“弹性布局”，用来为“盒子模型”提供“最大的灵活性”

二.Flex布局使用

2.1Flex使用语法

任何一个容器都可以指定为Flex布局

使用方法：

.box {display:flex;
}

行内元素也可以使用Flex布局：

.box {display:inline-flex;
}

值得注意的是，使用Flex布局后，子元素的“float”、“clear”、“vertical-align”属性将失效

2.2基本概念

采用Flex布局的元素，称为Flex容器，简称“容器”，它的所有子元素自动成为容器成员，称为Flex项目，简称“项目”

容器默认存在两根轴：“水平的主轴(main axis)”和“垂直的交叉轴(cross axis)”

主轴的开始位置(与边框的交叉点)叫“main start”，结束位置叫“main end”

交叉轴的开始位置叫“cross start”，结束位置叫“cross end”

项目默认沿主轴排列，单个项目占据的主轴空间叫作“main size”，占据的交叉轴空间叫作“corss size”

简化：“x轴为主轴”、“y轴为交叉轴”

三.容器的属性

3.1所有属性概述

Flex容器一共有六大属性，在这里我们给出：

flex-direction：内部元素的排列方式：从左到右、从右到左、从上到下、从下到上
flex-wrap：子元素的换行方式：不换行、换行(第一行在上面、第二行在上面)
flex-flow：子元素的排列方式和换行方式的简写
justify-content：子元素的水平对齐方式
align-items：子元素的垂直对齐方式
align-content：设置多个元素组成的整块的对齐方式

3.2flex-direction

flex-direction决定主轴的方向(即项目的排列方向)

简化：

内部元素的排列方式---->(从左到右、从右到左、从上到下、从下到上)

.box {flex-direction:row | row-reverse | column | column-reverse;
}

图示：

下面以一个代码为例，表示四个方向的排列：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Flex</title></head><body><div class="div"><div class="divC" style="width: 100px;height: 100px;background-color: aqua;"></div><div class="divC" style="width: 100px;height: 100px;background-color: black;"></div><div class="divC" style="width: 100px;height: 100px;background-color: blue;"></div></div><style type="text/css">.div{/* 设置为flex布局 */display: flex;/* 默认:从左往右 */flex-direction: row;/* row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。 */}</style></body>
</html>

上面的“flex-direction”为“row”时效果：

上面的“flex-direction”为“row-reverse”时效果：

上面的“flex-direction”为“column”时效果：

上面的“flex-direction”为“column-reverse”时效果：

3.3flex-wrap

默认情况下，项目都排在一条线(轴线)上，flex-wrap定义如果一条轴线排不下，如何换行

简化：

子元素的换行方式：不换行、换行(第一行在上面、第二行在上面)

.box {flex-wrap:nowrap | wrap | warp-reverse;
}

nowraop(默认) 不换行 ：

warp 换行(第一行在上)：

wrap-reverse 换行(第二行在上)：

3.4flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为：“row nowrap”

简化：

是子元素的排列方式和换行方式的简写

.box {flex-flow:<flex-direction> || <flex-wrap>;
}

3.5justify-content

justify-content属性定义了项目在主轴上的对齐方式

简化：

设置子元素的水平对齐方式

.box {justify-content:flex-start | flex-end | center | space-between | space-around;
}

图示：

详细说明：

flex-start(默认值)：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔相等
space-around：每个项目两侧的间隔相等，所以，项目之间的间隔比的项目与边框的间隔大一倍

3.6align-items

align-items属性定义项目在交叉轴上如何对齐

简化：

设置子元素的垂直对齐方式

格式：

.box {align-items:flex-start | flex-end | center | baseline | stretch;
}

图示：

详细说明：

flex-start：交叉轴的起点对齐(顶部对齐)
flex-end：交叉轴的终点对齐(底部对齐)
center：交叉轴的中点对齐(垂直对齐)
baseline：项目的第一行文字的基线对齐(基于内部第一行文本对齐)
stretch(默认值)：如果项目未设置成高度或设为auto，将占满整个容器的高度(高度占满整个容器)

3.7align-content

align-content属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用

简化：

设置多个元素组成的整块的对齐方式

格式：

.box {align-content:flex-start | flex-end | center | space-between | space-around | stretch;
}

图示：

详细说明：

flex-start：与交叉轴的起点对齐(顶部对齐)
flex-end：与交叉轴的终点对齐(底部对齐)
center：与交叉轴的中点对齐(居中对齐)
sapce-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边框之间的间隔大
stretch(默认值)：轴线占满整个交叉轴(高度占满整个容器)

四.项目(子元素)的属性

4.1所有属性概述

order：按照数字大小设置各个元素之间的排列方式
flex-grow：按照权重分配剩余空间进行等比例放大
flex-shrink：按照权重进行等比例缩小
felx-basis：设置子元素原始所占主轴空间大小(宽度)
flex：设置放大、缩小和原始大小的缩写，建议优先使用此方式
align-self：单独设置特定元素的对齐方式，忽略“align-items”

4.2order

order属性定义项目的排列顺序，数值越小，排列越靠前，默认为0

简化：

按照数字大小设置各个元素之间的排列方式

格式：

.item {order:<integer>;
}

图示：

4.3flex-grow

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

简化：

按照权重分配剩余空间进行等比例放大

格式：

.item{flex-grow:<number>;
}

提示：

如果所有项目的flex-grow都为1，那么它们将均匀分配剩余空间。

如果某个项目flex-grow为2，其余项目为1，那么前者分配到的空间将比后者大一倍

图示：

4.4flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

简化：

按照权重进行等比例缩小

格式：

.item{flex-shrink:<number>;
}

提示：

负值是一个无效的数值

如果某个项目属性值为0，那么该项目将不会缩小，而是让其它项目缩小

图示：

4.5flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间(main size)

浏览器根据这个属性计算是否有多余空间，默认值为“auto”，即项目本来大小

简化：

设置子元素原始所占主轴空间大小(宽度)

提示：

它可以设为跟width或height一样的值，那么项目将会占据固定空间

格式：

.item{flex-basis:<length> | auto;
}

4.6flex

flex属性是flex-grow，flex-shrink，flex-basis的简写，默认值为“0 1 auto”，后两个属性可选

简化：

设置放大、缩小、原始大小的简写，建议优先使用该方式

提示：

该属性有两个快捷值：“auto(1 1 auto)”、“none(0 0 auto)”

建议优先写这两个快捷值

格式：

.item {flex:none | [<flex-grow> <flex-shrink> <flex-basis>];
}

4.7align-self

align-self属性允许单个项目与其他项目有不一样的对齐方式，可以覆盖“align-items”属性

默认值为“auto”，表示继承父元素的“align-items”属性，如果没有父元素，那么等同于“stretch”

简化：

单独设置特定元素的方式，忽略align-items

格式：

.item {align-self:auto | flex-start | flex-end | center | baseline | stretch;
}

图示：

CSS中的Flex布局

目录一.什么是Flex布局二.Flex布局使用 2.1Flex使用语法 2.2基本概念三.容器的属性 3.1所有属性概述 3.2flex-direction 3.3flex-wrap 3.4flex-flow 3.5justify-content 3.6align-items 3.7align-content 四.项目(子元素)的属性 4.1所有属性概述 4.2order 4…...

编程日记 2024/5/30 9:02:13

基于扩散模型的，开源世界模型DIAMOND

日内瓦大学、微软研究院和爱丁堡大学的研究人员联合开源了，基于扩散模型的世界模型—DIAMOND。研究人员之所以选择扩散模型作为基础，是因为可以更好地捕捉视觉细节，同时具有建模复杂多模态分布的能力，以便在不同的环境下进行训练…...

编程日记 2024/5/30 9:00:11

【MySQL精通之路】InnoDB存储引擎

欢迎大家关注Innodb存储引擎专栏： http://t.csdnimg.cn/gEsSn 以下是innodb存储引擎相关所有的的知识点。 1.InnoDB简介 2.InnoDB与ACID模型 3.InnoDB多版本 4.InnoDB体系结构下图显示了构成InnoDB存储引擎体系结构的内存和磁盘结构。有关每个结构的信息&…...

编程日记 2024/5/30 8:59:10

【创作活动】探索 GPT-4o：下一代语言模型的技术革命

😄 19年之后由于某些原因断更了三年，23年重新扬帆起航，推出更多优质博文，希望大家多多支持～ 🌷 古之立大事者，不惟有超世之才，亦必有坚忍不拔之志 🎐 个人CSND主页——Mi…...

编程日记 2024/5/30 8:56:06

【热门话题】Debian常用命令指南

🌈个人主页: 鑫宝Code 🔥热门专栏: 闲话杂谈｜ 炫酷HTML | JavaScript基础 💫个人格言: "如无必要，勿增实体" 文章目录 Debian常用命令指南引言1. 文件与目录操作lscdmkdirrmcpmv 2. 包管理aptdpkg 3.…...

编程日记 2024/5/30 8:53:04

人大金仓 KingBase查询死锁，释放死锁

人大金仓(kingbase)查询数据库死锁及释放 kingbase锁表排查以及释放锁总结下 -- 查询，可自己添加where条件 SELECT * FROM sys_stat_activity WHERE state ! idle AND wait_event_typeLock-- 结束进程 SELECT sys_terminate_backend(pid);...

编程日记 2024/5/30 8:51:01

C++高手进阶：Windows 模块加载的艺术与策略

前文我们讲到了怎么不依赖第三库，搭建自己的测试框架没有看的读者可以通过这个链接自行阅读： 👉👉👉 自力更生：0依赖三方库，手把手教你打造专属C测试框架作为项目开发来说，我们通常…...

编程日记 2024/5/30 8:49:59

基于STM32单片机老人体温心率血氧跌倒定位短信报警

一.硬件及设计功能以STM32F103C8T6为中央处理器，GPS模块用采集数据，将数据发送给单片机后，单片机根据定位计算公式得出当前位置的经纬度信息和时间信息。经过LCD显示器处理后得出和时间信息SIM800模块发送短信到设定的手机号上，将…...

编程日记 2024/5/30 8:48:58

【测评】雨云香港三区云服务器，2核2G 5兆，仅需38元/月

写在前面雨云香港三区云服务器，高性能的 AMD EPYC 处理器企业级 NVME SSD 高性能云服务器。2核2G 10兆 400G防御，仅需38元/月，年付7折仅 319.2元/年。官网：https://www.rainyun.com 本次测评服务器配置如下： C…...

编程日记 2024/5/30 8:47:57

如何应对Android面试官 -＞玩转 Fragment

前言本章主要讲解下 Framgent 的核心原理； 基础用法线上基础用法，其他的可以自行百度 FragmentManager manager getSupportFragmentManager(); FragmentTransaction transaction manager.beginTransaction(); transaction.add(R.id.contentlayout,…...

编程日记 2024/5/30 8:45:55

sdbusplus：通过文件描述符传递数据

有的时候需要传递大量的数据，如果将数据通过dbus传递，会消耗大量的带宽。可以通过传递一个文件描述符替代传递数据：以下的service通过文件描述符接收数据： //fd_service.cpp #include <sdbusplus/asio/connection.hpp> #include <sdbusplus/asio/object_server…...

编程日记 2024/5/30 8:44:54

Linux 之前安装了python3 apt install python3.8-venv cd /root python3 -m venv HyperLPR3 REM cd HyperLPR3 source HyperLPR3/bin/activate 参考 https://www.jb51.net/article/222885.htm python -m pip install hyperlpr3 里面有fastapi，opencv等错误&#x…...

编程日记 2024/5/30 8:42:52

面试的内容

1.C的三大特性：封装，继承，多态 2.C11的特性 3.NULL与Nullptr的区别: nullptr是一个特殊的空指针常量，不能被隐式转换为其他类型。 NULL 在一些情况下可能会发生隐式类型转换 4.智能指针 5.stl/Qt stl stl容器包含哪些&…...

编程日记 2024/5/30 8:40:47

剪映网页版

https://www.capcut.cn/web 免费，免安装，跨平台，视频云合成，简直太好用了！...

编程日记 2024/5/30 8:39:46

pgsql

创建分区表： PostgreSQL分区表_pg分区表-CSDN博客创建list分区的函数 create or replace function create_list_fq(tb_name char, row_name char) returns int AS $$ declares char; beginraise notice CREATE TABLE if not exists %_% PARTITION OF % FOR VALU…...

编程日记 2024/5/30 8:38:44

Kotlin学习笔记泛型

在 Kotlin 中，T 通常用作类型参数的占位符，它在实例化或传递参数时会被替换成具体的类型。 Kotlin 支持泛型，这意味着您可以编写可以与多种数据类型一起工作的代码，而不必为每种数据类型编写单独的代码。 ### 泛型类和函数在 …...

编程日记 2024/5/30 8:34:37

开发者必看：Linux终端的10大装逼神器，让你的命令行炫酷起来！

💝💝💝欢迎莅临我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:「stormsha的主页」…...

编程日记 2024/5/30 8:33:36

20 VUE学习：插件

介绍插件 (Plugins) 是一种能为 Vue 添加全局功能的工具代码。下面是如何安装一个插件的示例： import { createApp } from vueconst app createApp({})app.use(myPlugin, {/* 可选的选项 */ })一个插件可以是一个拥有 install() 方法的对象，也可以直接…...

编程日记 2024/5/30 8:32:35

python之any用法

写法对比代码一： any(i for i in [0,1]) 代码2： any([i for i in [0,1]]) 优劣结论：代码一写法更好解释： 在 Python 中，any() 函数可以接受一个可迭代对象作为参数，并返回 True 如果可迭代对象…...

编程日记 2024/5/30 8:30:33

【前端学习——react坑】useState使用

问题使用useState 时，例如 const [selectedId, setSelectedId] useState([false,true,false]);这样直接利用，无法引发使用selectedId状态的组件的变化，但是selectedId是修改了的 let tempselectedId;temp[toggledId]selectedId[toggledId…...

编程日记 2024/5/30 8:29:32

Nunchaku-FLUX.1-dev镜像安全加固：非root运行/最小权限/网络策略限制

Nunchaku-FLUX.1-dev镜像安全加固：非root运行/最小权限/网络策略限制 1. 为什么需要安全加固？ 当你把Nunchaku-FLUX.1-dev这个强大的文生图模型部署在自己的服务器上时，可能更多关注的是它能生成多么精美的图片，或者处理中文提示…...

编程新知 2026/3/29 14:11:22

文墨共鸣镜像详解：开箱即用的中文语义相似度分析解决方案

文墨共鸣镜像详解：开箱即用的中文语义相似度分析解决方案 1. 引言：当传统美学遇上现代AI 在信息爆炸的时代，我们每天都要处理大量文本内容。无论是商业文案的比对、学术观点的对照，还是日常交流的理解，快速判断两段文…...

编程新知 2026/3/29 11:59:54

终极指南：用Kronos金融大模型5步构建你的量化交易系统

终极指南：用Kronos金融大模型5步构建你的量化交易系统【免费下载链接】Kronos Kronos: A Foundation Model for the Language of Financial Markets 项目地址: https://gitcode.com/GitHub_Trending/kronos14/Kronos Kronos是首个专为金融市场设计的开源基础…...

编程新知 2026/3/29 11:37:28

Autoware.universe 技术栈全景解析：从硬件选型到软件集成的智驾工程实践

1. Autoware.universe技术栈全景概览第一次接触Autoware.universe时，我被它庞大的技术生态震撼到了。这不仅仅是一个自动驾驶软件框架，更像是一个完整的工程体系。经过几个实际项目的摸爬滚打，我发现要真正掌握这套技术栈，必须建…...

编程新知 2026/3/29 11:31:20

图像标注难题如何破解？LabelImg工具全面解析与实战指南

图像标注难题如何破解？LabelImg工具全面解析与实战指南【免费下载链接】labelImg LabelImg is now part of the Label Studio community. The popular image annotation tool created by Tzutalin is no longer actively being developed, but you can check out L…...

编程新知 2026/3/29 10:32:57

矩阵按键扫描技术对比：行列扫描与反转扫描的实战解析

1. 矩阵按键扫描技术入门指南第一次接触矩阵按键时，我完全被那些交叉的行列线搞晕了。直到在某个深夜调试项目时，才突然理解了这个设计的精妙之处——它就像城市道路的十字路口，通过行列坐标就能精准定位每个按键位置。这种设计让16个按键只…...

编程新知 2026/3/29 10:28:50

BepInEx终极指南：快速上手Unity游戏插件框架

BepInEx终极指南：快速上手Unity游戏插件框架【免费下载链接】BepInEx Unity / XNA game patcher and plugin framework 项目地址: https://gitcode.com/GitHub_Trending/be/BepInEx 你是否曾为Unity游戏模组安装的复杂性而烦恼？插件文件散落各处…...

编程新知 2026/3/29 10:06:17