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

CSS 笔记——Flexbox（弹性盒布局）

article 2026/1/29 23:42:11

1. Flex 容器与 Flex 项目

2. 主轴与交叉轴

3. Flex 容器的属性

display

flex-direction

justify-content

align-items

align-content

flex-wrap

4. Flex 项目的属性

flex-grow

flex-shrink

flex-basis

flex

align-self

5. Flexbox 的优点

6. Flexbox 的应用场景

示例代码

总结

CSS Flexbox（弹性盒布局）是一种强大的布局模型，用于创建灵活且响应式的用户界面。以下是对 Flexbox 布局中主要知识点的详细介绍：

1. Flex 容器与 Flex 项目

Flex 容器：通过设置 display: flex; 或 display: inline-flex;，将一个元素变成 Flex 容器。

Flex 项目：Flex 容器的直接子元素称为 Flex 项目。

直接子元素是指那些直接嵌套在某个元素内部的元素，而不包括嵌套在中间的其他元素内的元素。

代码示例

<div class="container"> <!-- Flex 容器 --><div class="item"></div> <!-- Flex 项目 --><div class="item"></div><div class="item"></div>
</div>

2. 主轴与交叉轴

主轴（Main Axis）：Flex 容器的主要方向，默认是水平方向。

交叉轴（Cross Axis）：与主轴垂直的方向，默认是垂直方向。

3. Flex 容器的属性

以下是 Flex 容器可以设置的属性：

`display`

值：flex 或 inline-flex

作用：将容器设置为 Flexbox 布局。

.container {display: flex; /* 或 inline-flex */
}

`flex-direction`

作用：定义主轴的方向。

常见值：

row：主轴为水平方向（默认值）。

row-reverse：主轴为水平方向，但反向排列。

column：主轴为垂直方向。

column-reverse：主轴为垂直方向，但反向排列。

.container {flex-direction: row; /* 水平排列 */
}

`justify-content`

作用：定义子元素在主轴上的对齐方式。

常见值：

flex-start：子元素对齐主轴的起点。

flex-end：子元素对齐主轴的终点。

center：子元素在主轴上居中对齐。

space-between：子元素之间的间距相等，首尾元素分别对齐主轴的起点和终点。

space-around：子元素之间的间距相等，首尾元素与容器边缘的间距为其他间距的一半。

.container {justify-content: center; /* 主轴居中对齐 */
}

`align-items`

作用：定义子元素在交叉轴上的对齐方式。

常见值：

stretch：子元素在交叉轴上拉伸，填满整个容器（默认值）。

flex-start：子元素对齐交叉轴的起点。

flex-end：子元素对齐交叉轴的终点。

center：子元素在交叉轴上居中对齐。

baseline：子元素的基线对齐。

.container {align-items: center; /* 交叉轴居中对齐 */
}

`align-content`

作用：定义多行子元素在交叉轴上的对齐方式（仅当子元素换行时有效）。

常见值：

flex-start：子元素对齐交叉轴的起点。

flex-end：子元素对齐交叉轴的终点。

center：子元素在交叉轴上居中对齐。

space-between：子元素之间的间距相等。

space-around：子元素之间的间距相等，首尾元素与容器边缘的间距为其他间距的一半。

stretch：子元素在交叉轴上拉伸，填满整个容器。

.container {align-content: space-between; /* 多行子元素间距相等 */
}

`flex-wrap`

作用：定义子元素是否可以换行。

常见值：

nowrap：子元素不换行（默认值）。

wrap：子元素在必要时换行。

wrap-reverse：子元素在必要时换行，但反向排列。

.container {flex-wrap: wrap; /* 子元素可以换行 */
}

4. Flex 项目的属性

以下是 Flex 项目可以设置的属性：

`flex-grow`

作用：定义子元素在主轴上的伸缩比例。

值：数字，表示子元素可以占用的剩余空间比例。

.item {flex-grow: 1; /* 子元素可以占用所有剩余空间 */
}

`flex-shrink`

作用：定义子元素在主轴上的收缩比例。

值：数字，表示子元素在空间不足时的收缩比例。

.item {flex-shrink: 1; /* 子元素可以收缩 */
}

`flex-basis`

作用：定义子元素在主轴上的初始大小。

值：可以是具体的长度（如 100px）或 auto（默认值）。

.item {flex-basis: 100px; /* 子元素的初始宽度为 100px */
}

`flex`

作用：flex-grow、flex-shrink 和 flex-basis 的简写形式。

值：flex: <flex-grow> <flex-shrink> <flex-basis>;

常用值：

flex: 1;：等同于 flex: 1 1 0;，表示子元素可以伸缩。

flex: auto;：等同于 flex: 1 1 auto;，表示子元素可以伸缩，初始大小为 auto。

flex: none;：等同于 flex: 0 0 auto;，表示子元素不可伸缩。

.item {flex: 1; /* 子元素可以伸缩 */
}

`align-self`

作用：定义单个子元素在交叉轴上的对齐方式，覆盖 align-items 的设置。

常见值：与 align-items 的值相同。

.item {align-self: center; /* 单个子元素在交叉轴上居中对齐 */
}

5. Flexbox 的优点

灵活性：Flexbox 可以轻松实现复杂的布局，如水平和垂直居中、等分空间等。

响应式：Flexbox 布局可以根据容器大小动态调整子元素的排列。

简单性：相比传统的布局方式（如浮动、定位），Flexbox 的代码更简洁，逻辑更清晰。

6. Flexbox 的应用场景

水平和垂直居中：通过 justify-content: center; 和 align-items: center; 实现。

等分空间：通过 flex: 1; 或 space-between 实现。

响应式布局：通过 flex-wrap 和媒体查询实现。

复杂布局：如导航栏、卡片布局、网格布局等。

示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flexbox 示例</title><style>.container {display: flex;flex-direction: row;justify-content: space-between;align-items: center;width: 300px;height: 100px;background-color: #f0f0f0;border: 1px solid #ccc;}.item {width: 80px;height: 60px;background-color: #4285f4;color: white;display: flex;justify-content: center;align-items: center;flex-shrink: 0; /* 子元素不收缩 */}</style>
</head>
<body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
</body>
</html>

总结

Flexbox 是一种非常强大的布局工具，适合处理一维布局（水平或垂直）。通过灵活的属性设置，可以轻松实现复杂的布局需求。掌握 Flexbox 的核心概念和常用属性，可以在现代 Web 开发中事半功倍。

CSS 笔记——Flexbox（弹性盒布局）

目录 1. Flex 容器与 Flex 项目 2. 主轴与交叉轴 3. Flex 容器的属性 display flex-direction justify-content align-items align-content flex-wrap 4. Flex 项目的属性 flex-grow flex-shrink flex-basis flex align-self 5. Flexbox 的优点 6. Flexbox 的…...

编程日记 2026/1/29 23:42:11

[实战] linux驱动框架与驱动开发实战

linux驱动框架与驱动开发实战 Linux驱动框架与驱动开发实战一、Linux驱动框架概述1.1 Linux驱动的分类1.2 Linux驱动的基本框架二、Linux驱动关键API详解2.1 模块相关API2.2 字符设备驱动API2.3 内存管理API2.4 中断处理API2.5 PCI设备驱动API 三、Xilinx XDMA驱动开发详解3.1…...

编程日记 2025/8/24 20:18:41

cpp（c++）win 10编译GDAL、PROJ、SQLite3、curl、libtiff

cpp（c）编译GDAL、PROJ、SQLite3 Sqlite3libtiffcurlprojGDAL Sqlite3 1、下载 Sqlite3 源码、工具、二进制预编译 exe Sqlite3 官网：https://www.sqlite.org/download.html 下载 sqlite-amalgamation-3430200.zipsqlite-dll-win64-x64-3430…...

编程日记 2026/1/29 11:45:53

每日一题（小白）暴力娱乐篇23

由题意得知给我们一串数字，我们每次交换两位，最少交换多少次成功得到有顺序的数组。我们以平常的思维去思考，加入给你一串数字获得最少的交换次数，意味着你的交换后续基本不会变，比如说2 1 3 5 4 中1与2交换后不变&…...

编程日记 2026/1/26 18:05:32

01-Redis-基础

1 redis诞生历程 redis的作者笔名叫做antirez，2008年的时候他做了一个记录网站访问情况的系统，比如每天有多少个用户，多少个页面被浏览，访客的IP、操作系统、浏览器、使用的搜索关键词等等(跟百度统计、CNZZ功能一样)。最开始存储…...

编程日记 2026/1/29 11:51:10

【从零开始学习JVM | 第一篇】快速认识JVM

什么是JVM？ JVM--Java虚拟机，它是Java实现平台无关性的基石。 Java程序运行的时候，编译器将Java代码编译为平台无关的Java字节码文件（.class），接下来对应平台的JVM对字节码进行运行解释，翻译成…...

编程日记 2026/1/28 20:55:46

使用RabbitMQ实现异步秒杀

搭建RabbitMQ 在虚拟机上用docker搭建RabbitMQ，首先拉取镜像 docker run --privilegedtrue -d -p 5672:5672 -p 15672:15672 --name rabbitmq rabbitmq:management mkdir -p /usr/local/docker/rabbitmq再创建rabbitmq容器，下面的命令已经能够创建之后…...

编程日记 2026/1/26 22:23:12

Spring Boot 配置文件加载优先级全解析

精心整理了最新的面试资料和简历模板，有需要的可以自行获取点击前往百度网盘获取点击前往夸克网盘获取 Spring Boot 配置文件加载优先级全解析 Spring Boot 的配置文件加载机制是开发者管理不同环境配置的核心功能之一。其通过外部化配置（Externaliz…...

编程日记 2026/1/27 2:36:15

解决华硕主板Z890m下载ubuntu20.04后没有以太网问题

问题描述： 华硕主板Z890m下载双系统ubuntu20.04后，发现ubuntu不能打开以太网。问题原因： 华硕主板的网卡驱动是r8125,而ubuntu20.04的驱动版本是r8169，所以是网卡驱动不匹配造成解决方案开机界面按下F2进入BOIS模式&#…...

编程日记 2026/1/26 16:59:58

xLua的Lua调用C#的2，3，4

使用Lua在Unity中创建游戏对象，组件： 相关代码如下： Lua --Lua实例化类 --C# Npc objnew Npc() --通过调用构造函数创建对象 local objCS.Npc() obj.HP100 print(obj.HP) local obj1CS.Npc("admin") print(obj1.Name)--表方法希…...

编程日记 2026/1/26 22:14:19

Debian系统_主板作为路由器_测试局域网设备间网速

Debian系统_主板作为路由器_测试局域网设备间网速一、360软件测网速 360测出来的网速实际上是宽带的速度，并不是路由器LAN口到电脑这一段的网速二、使用iperf3 进行双向带宽测试 1、开发板端下载软件 //Debian系统或者/Ubuntu sudo apt update && sudo…...

编程日记 2026/1/29 12:10:43

从 macos 切换到 windows 上安装的工具类软件

起因用了很多年的macos, 已经习惯了macos上的操作, 期望能在windows上获得类似的体验, 于是花了一些时间来找windows上相对应的软件. 截图软件 snipaste windows和macos都有的软件, 截图非常好用文件同步软件 oneDrive: 尝试了不同的同步软件, 还是微软在各…...

编程日记 2026/1/26 19:14:20

JavaScript中通过array.map(）实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等，array.map(）的使用详解（附实际应用代码）

目录 JavaScript中通过array.map(）实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等，array.map（）的使用详解（附实际应用代码） 一、什么时候该使用Array.map()&#xff0…...

编程日记 2026/1/29 13:05:17

去除Mysql表中的空格、回车、换行符和特殊字符

系列文章目录文章目录系列文章目录前言一、示例1.sql层面2.java层面前言一、示例 1.sql层面参考 ## 例子1 ## CHAR(10) 表示换行符 ## CHAR(13) 表示回车UPDATE 表名 SET 列名 REPLACE(REPLACE(列名, CHAR(10), ), CHAR(13), )## 例子2 ## 删除字段中的空格、换行符、…...

编程日记 2026/1/30 11:51:00

P9242 [蓝桥杯 2023 省 B] 接龙数列

这道题说要求最少删多少个使剩下的序列是接龙序列，这个问题可以转换为序列中最长的接龙序列是多少，然后用总长度减去最长接龙序列的长度就可以了，在第一个暴力版本的代码中我用了两个for循环求出了所有的接龙序列的长度，但是会超时…...

编程日记 2026/1/25 4:00:14

macos下 ragflow二次开发环境搭建

参考官网链接 https://ragflow.io/docs/dev/launch_ragflow_from_source虚拟环境 git clone https://github.com/infiniflow/ragflow.git cd ragflow/ # if not pipx, please install it at first pip3 install pipxpipx install uv uv sync --python 3.10 --all-extras 安装 …...

编程日记 2026/1/29 9:40:04

SQL优化技术分享：从 321 秒到 0.2 秒的性能飞跃 —— 基于 PawSQL 的 TPCH 查询优化实战

在数据库性能优化领域，TPC-H 测试集是一个经典的基准测试工具，常用于评估数据库系统的查询性能。本文将基于 TPCH 测试集中的第 20个查询，结合 PawSQL 自动化优化工具，详细分析如何通过 SQL 重写和索引设计，将查询性能…...

编程日记 2026/1/29 11:26:19

密码学基础——DES算法

前面的密码学基础——密码学文章中介绍了密码学相关的概念，其中简要地对称密码体制(也叫单钥密码体制、秘密密钥体制）进行了解释，我们可以知道单钥体制的加密密钥和解密密钥相同，单钥密码分为流密码和分组密码。流密码&#xff0…...

编程日记 2026/1/29 11:13:43

在 Linux 终端中轻松设置 Chromium 的 User-Agent：模拟手机模式与自定义浏览体验

在 Linux 系统中，通过终端灵活控制 Chromium 的行为可以大幅提升工作效率。本文将详细介绍如何通过命令行参数和环境变量自定义 Chromium 的 User-Agent，并结合手机模式模拟，实现更灵活的浏览体验。为什么需要自定义 User-Agent？…...

编程日记 2026/1/29 7:10:12

ChatGPT 4：引领 AI 创作新时代

文章目录前言一、ChatGPT 4 的技术革新二、AI 文案创作：精准生成与个性化定制三、AI 绘画艺术：从文字到图像的神奇转化四、AI 视频制作：自动化剪辑与创意实现五、知识库与 ChatGPT 4 的深度融合六、全新的变革和机遇七、相关书籍推荐《ChatG…...

编程日记 2025/11/30 18:16:39

http页面的加载过程

HTTP/2 核心概念 1.1 流（Stream） • 定义：HTTP/2 连接中的逻辑通道，用于传输数据，每个流有唯一标识符（Stream ID）。 • 特点： ◦ 支持多路复用（多个流并行传输&#…...

编程日记 2026/1/26 22:13:53

MySQL【8.0.41版】安装详细教程--无需手动配置环境

一、MySQL 介绍 1. 概述 MySQL 是一个开源的关系型数据库管理系统，由瑞典公司 MySQL AB 开发，现属于 Oracle 旗下。它基于 SQL（结构化查询语言）进行数据管理，支持多用户、多线程操作，广泛应用于 Web 应用、…...

编程日记 2026/1/26 20:20:00

鸿蒙ArkTS实战：从零打造智能表达式计算器（附状态管理+路由传参核心实现）

还在为组件状态混乱、页面跳转丢参数而头疼？ 这篇博客将揭秘如何用鸿蒙ArkTS打造一个漂亮美观的智能计算器： ✅ 输入完整表达式，秒出结果——字符串切割简单计算 ✅ 状态管理黑科技——Provide/Consume 实现跨组件实时响应 ✅ 路由传参实战—…...

编程日记 2026/1/29 20:50:52

【58】编程技巧：单片机编程命名规范

【58】编程技巧：单片机编程命名规范引言在大型嵌入式项目开发中，变量和常量的命名混乱会导致代码难以维护。本文系统阐述变量、常量、指针、结构体等命名规范，通过统一规则提升代码可读性与协作效率。目标是帮助开发者建立清晰的命名习惯&…...

编程日记 2025/11/8 1:42:52

Windows 部署项目 apache + mod_wsgi，nginx + waitress

文章目录 1、apache mod_wsgi，nginx waitress两种部署方式的区别2、以nginx waitress为例有些项目必须部署在windows上，有IIS wfastcgi、apache mod_wsgi，nginx waitress部署方式 1、apache mod_wsgi，nginx waitress两种…...

编程日记 2025/12/20 15:49:47