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

【前端】【css】flex布局详解

news 来源：原创 2025/9/11 20:53:06

Flex 布局（Flexible Box Layout，弹性盒子布局）是 CSS3 中的一种布局模式，用于在容器中更高效地分配空间并对齐内容，即使它们的大小是动态未知的。它非常适用于响应式设计。

一、Flex 布局的基本概念

1. 启用 Flex 布局

只需要给父容器设置：

display: flex;

或者：

display: inline-flex;  /* 行内弹性盒子 */

2. 容器与项目

容器（Flex Container）：设置了 display: flex 的元素。
项目（Flex Item）：容器内的直接子元素。

二、主轴和交叉轴

主轴（Main Axis）：项目排列的方向，默认是水平方向（从左到右）。
交叉轴（Cross Axis）：与主轴垂直的方向。

三、Flex 容器的属性（作用于父元素）

1. `flex-direction`：主轴方向

值	说明
row（默认）	主轴为水平方向，起点在左
row-reverse	主轴为水平方向，起点在右
column	主轴为垂直方向，起点在上
column-reverse	主轴为垂直方向，起点在下

2. `flex-wrap`：是否换行

值	说明
nowrap（默认）	不换行
wrap	换行，第一行在上方
wrap-reverse	换行，第一行在下方

3. `flex-flow`：`flex-direction` + `flex-wrap` 的简写

flex-flow: row wrap;

4. `justify-content`：主轴对齐方式

值	说明
flex-start（默认）	起始对齐
flex-end	末尾对齐
center	居中对齐
space-between	两端对齐，项目之间间隔相等
space-around	每个项目两侧间隔相等
space-evenly	所有间隔都相等（包括头尾）

5. `align-items`：交叉轴对齐方式

值	说明
stretch（默认）	填满交叉轴
flex-start	顶部对齐
flex-end	底部对齐
center	居中对齐
baseline	按基线对齐

6. `align-content`：多行交叉轴对齐方式（有多行时生效）

值	说明
stretch（默认）	填满交叉轴
flex-start	顶部对齐
flex-end	底部对齐
center	居中对齐
space-between	两端对齐
space-around	间距相等
space-evenly	间距全部相等

四、Flex 项目的属性（作用于子元素）

1. `order`：定义排列顺序

.order { order: 1; }

值越小，越靠前，默认是 0。

2. `flex-grow`：放大比例

.flex-grow { flex-grow: 1; }

所有项目的 flex-grow 总和决定空间分配比例。

3. `flex-shrink`：缩小比例

.flex-shrink { flex-shrink: 1; }

为负空间时如何缩小，默认是 1。

4. `flex-basis`：项目在主轴上的初始大小

.flex-basis { flex-basis: 100px; }

5. `flex`：简写属性，包含 grow、shrink、basis

flex: 1 0 100px;

通常写法：

flex: 1; 等价于 flex: 1 1 0%
flex: auto; 等价于 flex: 1 1 auto
flex: none; 等价于 flex: 0 0 auto

6. `align-self`：单独设置某个项目在交叉轴上的对齐方式（覆盖 `align-items`）

五、常见使用场景举例

1. 水平居中 + 垂直居中

.parent {display: flex;justify-content: center;align-items: center;
}

2. 两端对齐，中间自适应

.left { flex: 0 0 auto; }
.middle { flex: 1; }
.right { flex: 0 0 auto; }

总结

Flex 是一种强大且灵活的布局方式，核心在于：

设置主轴方向（flex-direction）
控制项目在主轴/交叉轴的对齐方式
利用 flex 属性实现伸缩布局
响应式设计中的利器

【前端】【css】flex布局详解

Flex 布局（Flexible Box Layout，弹性盒子布局）是 CSS3 中的一种布局模式，用于在容器中更高效地分配空间并对齐内容，即使它们的大小是动态未知的。它非常适用于响应式设计。一、Flex 布局的基本概念 1. 启用 Flex 布局…...

编程日记 2025/9/11 20:53:06

Python Cookbook-5.15 根据姓的首字母将人名排序和分组

任务想将一组人名写入一个地址簿，同时还希望地址簿能够根据姓的首字母进行分组，且按照字母顺序表排序。解决方案 Python 2.4 的新 itertools.groupby 函数使得这个任务很简单: import itertools def qroupnames(name_iterable):sorted_names sort…...

编程日记 2025/9/10 15:42:50

深入探析C#设计模式：访问者模式（Visitor Pattern）的原理与应用

引言在软件开发中，设计模式为我们提供了高效、可维护的解决方案。而在众多设计模式中，访问者模式（Visitor Pattern）以其独特的结构和应用场景，在复杂系统中发挥着重要作用。本文将深入讲解访问者模式的定义、原理、优…...

编程日记 2025/9/2 12:44:24

2025蓝桥杯省赛C/C++研究生组游记

前言至少半年没写算法题了，手生了不少，由于python写太多导致行末老是忘记打分号，printf老是忘记写f，for和if的括号也老是忘写，差点连&&和||都忘记了。题目都是回忆版本，可能有不准确的地方。 …...

编程日记 2025/9/10 1:26:08

RPA VS AI Agent

图片来源网络 RPA（机器人流程自动化）和AI Agent（人工智能代理）在自动化和智能化领域各自扮演着重要角色，但它们之间存在显著的区别。以下是对两者区别的详细分析： 一、定义与核心功能 RPA（机…...

编程日记 2025/9/8 18:14:11

软件信息化项目等级分类评定表

对信息化项目进行分类评级管理，能够优化资源配置、保障项目成效。可从项目性质、规模、战略价值等维度分类，依据技术、风险、收益等指标评级，进而实现精细化管理。分类管理按项目性质分类：可分为业务流程优化项目，如优化企业采购流程的信息化项目，旨在提升效率；还有信…...

编程日记 2025/9/9 11:22:29

从0~1搭建自动化备份全网服务器数据平台

目录摘要: 一、项目背景 1.1 rsync简介作用： 特点： 语法： 1.2 项目需求配置需求： 二、项目环境 2.1 项目拓扑结构 2.2 软硬件环境清单三、任务清单 3.1 项目环境搭建 3.2 服务器部署 Web服务器搭建部署&#…...

编程日记 2025/9/11 16:18:34

用户态视角理解内核ROP利用：快速从shell到root的进阶

用户态视角理解内核ROP利用：快速从shell到root的进阶一、摘要本文仅限于快速从用户态向内核态入门,可能会有很多不严谨的地方,存在问题请及时告知感谢!本文旨在通过对比用户态 ROP 利用和内核 ROP 利用，揭示两者在利用手法上的相似性。通过分析用户态漏洞利用的流程，结合…...

编程日记 2025/9/9 1:30:34

我又叕叕叕更新了~纯手工编写C++画图，有注释~

本次更新内容：优化性能，朗读提前申明：如果运行不了，请到主页查看RedpandaDevc++下载，若还是不行就卸了重装。版本号：1.26.36 779行 24690字最终结果预览代码预览 //版本号 :v1.26.36 //最终归属权为作者(饼干帅成渣)所有 //禁止转载 //仅供学习，不得用于违法 #…...

编程日记 2025/9/4 7:04:35

【家政平台开发(37)】家政平台蜕变记：性能优化与代码重构揭秘

本【家政平台开发】专栏聚焦家政平台从 0 到 1 的全流程打造。从前期需求分析，剖析家政行业现状、挖掘用户需求与梳理功能要点，到系统设计阶段的架构选型、数据库构建，再到开发阶段各模块逐一实现。涵盖移动与 PC 端设计、接口开发及性能优化，测试阶段多维度保障平台质量，…...

编程日记 2025/9/8 0:32:32

基于springboot+vue的秦皇岛旅游景点管理系统

开发语言：Java框架：springbootJDK版本：JDK1.8服务器：tomcat7数据库：mysql 5.7数据库工具：Navicat11开发软件：eclipse/myeclipse/ideaMaven包：Maven3.3.9 系统展示用户登录旅游路…...

编程日记 2025/8/17 19:53:47

图像预处理-翻转与仿射变换

一.图像翻转 cv2.flip(img,flipcode) 参数 - flipcode : 指定翻转类型的标志，为0，表示沿x轴翻转，>0(默认1) 表示沿y轴翻转，为 <0(默认-1) 表示水平垂直翻转 OpenCV中，图片的镜像旋转以图像的中心为原点 impo…...

编程日记 2025/8/29 14:09:03

[ABC400F] Happy Birthday! 3 题解

考虑正难则反。问题转化为： 一个环上有 n n n 个物品，颜色分别为 c o l i col_i coli，每次操作选择两个数 i , j i, j i,j 使得 ∀ k ∈ [ i , j ] , c o l k c o l i ∨ c o l k 0 \forall k \in [i, j], col_k col_i \lor col_k …...

编程日记 2025/9/10 20:20:29

使用nuxt3+tailwindcss4+@nuxt/content3在页面渲染 markdown 文档

nuxt3tailwindcss在页面渲染 markdown 文档页面效果依赖 “nuxt/content”: “^3.4.0” “tailwindcss”: “^4.0.10” “nuxt”: “^3.16.2” “tailwindcss/vite”: “^4.0.10” tailwindcss/typography (这个是格式化 md 样式用的) 注意： 这里nuxt/content…...

编程日记 2025/9/3 19:18:17

畅游Diffusion数字人(23)：字节最新表情+动作模仿视频生成DreamActor-M1

畅游Diffusion数字人(0)：专栏文章导航前言：之前有很多动作模仿或者表情模仿的工作，但是如果要在实际使用中进行电影级的复刻工作，仅仅表情或动作模仿还不够，需要表情和动作一起模仿。最近字节跳动提出了一个表情+动作模仿视频生成DreamActor-M1。目录贡献概述核心动…...

编程日记 2025/9/10 12:42:21

多模态学习分析（MLA）驱动高中差异化教学策略研究

一、引言 1.1 研究背景在当今时代，教育数字化转型的浪潮正席卷全球，深刻地改变着教育的面貌。这一转型不仅是技术的革新，更是教育理念、教学模式和教育管理的全面变革。随着互联网、大数据、人工智能等现代信息技术在教育领域的广泛应用&a…...

编程日记 2025/9/4 0:18:32

为什么ASCII的A是65[特殊字符]

为什么ASCII的A是65 1. ASCII是怎么来的 ASCII是1960年代美国标准协会制定的，目的是统一计算机字符编码。它们要在**7个比特位（0-127）**里，塞下所有英文字符，数字，标点和控制符。 2. 为什么A是65&#x…...

编程日记 2025/9/8 1:28:20

Python正则表达式实战技巧：如何高效处理文本匹配？

当你需要在Python中处理文本数据时，正则表达式绝对是你的瑞士军刀。无论是数据清洗、日志分析还是表单验证，掌握正则表达式都能让你事半功倍。今天我们就来聊聊Python中re模块的那些实用技巧和常见陷阱。为什么正则表达式如此重要？ 想象一…...

编程日记 2025/9/9 8:58:54

驱动学习专栏--写在前面

此专栏基于正点原子的文档【正点原子】I.MX6U嵌入式Linux驱动开发指南V1.81 开发板为luckfox的rv1106开发板，之前参加过一个CM1相机的开源项目，与其吃灰不如作为一个学习的工具来发挥余热所以文档中的一些东西需要对应的在rv1106平台上做修改&#xff…...

编程日记 2025/9/10 14:20:39

Java中的Map vs Python字典：核心对比与使用指南

一、核心概念 1. 基本定义 Python字典（dict） ：动态类型键值对集合，语法简洁，支持快速查找。Java Map：接口，常用实现类如 HashMap、LinkedHashMap，需声明键值类型（泛型&…...

编程日记 2025/9/8 4:08:58

从零搭建微服务项目Pro（第0章——微服务项目脚手架搭建）

前言： 在本专栏Base第0章曾介绍一种入门级的微服务项目搭建，尽管后续基于此框架上实现了Nacos、Eureka服务注册发现、配置管理、Feign调用、网关模块、OSS文件存储、JSR参数校验、LogBack日志配置，鉴权模块、定时任务模块等，但由于…...

编程日记 2025/9/10 10:55:15

RAG创建向量数据库：docsearch = FAISS.from_texts(documents, embeddings)

RAG创建向量数据库：docsearch = FAISS.from_texts(documents, embeddings) 代码解释 docsearch = FAISS.from_texts(documents, embeddings) 这行代码主要作用是基于给定的文本集合创建一个向量数据库（这里使用 FAISS 作为向量数据库工具）。具体说明如下： FAISS ：FAISS …...

编程日记 2025/9/8 20:03:51

71.case语句要比if-else 语句费逻辑单元

...

编程日记 2025/9/9 11:22:50

适配python3.9的 SORT算法

简单地更改了 sort.py 函数的接口，核心思想、处理操作并不改变。源代码链接：https://github.com/abewley/sort import os import numpy as np import glob import time import argparse from filterpy.kalman import KalmanFilter from scipy.optimiz…...

编程日记 2025/9/9 1:05:35

记录Docker部署CosyVoice V2.0

#记录工作 CosyVoice 是由 FunAudioLLM 团队开发的一个开源多语言大规模语音生成模型，提供了从推理、训练到部署的全栈解决方案。项目地址： https://github.com/FunAudioLLM/CosyVoice.git 该项目目前从v1.0版本迭代到v2.0版本，但是在Wind…...

编程日记 2025/9/9 16:53:43

源码编译 Galera、MySQL 5.7 Wsrep 和安装 MySQL 5.7 Galera集群

源码编译 Galera、MySQL 5.7 Wsrep 和安装 MySQL 5.7 Galera集群说明1、源码编译 Galera1.1、安装依赖1.2、源码编译安装 openSSL1.2.1、下载源码1.2.2、编译安装 1.3、源码编译安装 Galera 31.3.1、下载源码1.3.2、注意1.3.3、编译安装 2、源码编译 MySQL-Wsrep2.1、安装依赖…...

编程日记 2025/9/8 5:31:18

【SLAM】ubuntu 18.04 下 OpenCV 3.2.0 的 opencv_example 运行闪退

本文首发于❄慕雪的寒舍 ubuntu 18.04 下 OpenCV 3.2.0 的 opencv_example 运行闪退问题探究。 1. 问题说明在之前的ORB-SLAM3项目于ROS运行的博客中，提到过安装ROS时会自己安装一个OpenCV 3.2.0版本，所以最好不要安装其他版本的OpenCV，避…...

编程日记 2025/9/7 10:43:03

Linux网络编程——数据链路层详解，以太网、MAC地址、MTU、ARP、DNS、NAT、代理服务器......

目录一、前言二、以太网二、以太网帧格式三、 MAC地址四、MTU 1、数据链路层的数据分片 2、MTU对UDP协议的影响 3、MTU对TCP协议的影响五、ARP协议 1、什么是ARP 2、ARP的作用 3、ARP协议的工作流程 4、ARP缓存表 5、ARP请求报文 6、中间人六、DNS&…...

编程日记 2025/9/6 14:20:28

Android7 Input（四）InputReader

概述本文主要描述了Android Input框架中的InputReader的功能，InputReader模块的功能，总结成一句话就是InputReader获取输入设备的事件并将事件进行加工处理，然后传递给QueuedInputListener，最终QueuedInputListener将事件传递给…...

编程日记 2025/9/10 4:54:31

游戏报错？MFC140.dll怎么安装才能解决问题？提供多种MFC140.dll丢失修复方案

MFC140.dll 是 Microsoft Visual C 2015 运行库的重要组成部分，许多软件和游戏依赖它才能正常运行。如果你的电脑提示 "MFC140.dll 丢失" 或 "MFC140.dll 未找到"，说明系统缺少该文件，导致程序无法启动。本文将详细介绍 …...

编程日记 2025/9/8 8:01:01

寻找最大美丽数

# 输入：nums1 [4,2,1,5,3], nums2 [10,20,30,40,50], k 2 # 输出：[80,30,0,80,50] import random class Solution:def findMaxSum(self, nums1, nums2, k):hash_table []sum1 0data []print(**31,\n,\t数据)for key,values in enumerate(nums1):da…...

编程日记 2025/9/9 13:32:46

[Linux]进程地址空间

前言我们在学习C语言期间，经常可以提及到这些区域，有一个问题：这里的地址空间是内存吗？答案是这里的地址空间并不是内存。这里的地址空间是进程地址空间，下面我们就讲解进程地址空间。这段空间中自下而上&#xff…...

编程日记 2025/9/8 16:40:09

dfs和bfs算法

DFS（深度优先搜索，Depth-First Search）和 BFS（广度优先搜索，Breadth-First Search）是图遍历或搜索算法中的两种基本方法。它们在探索图的节点时采用不同的策略，适用于不同的场景。 ### 深度优先…...

编程日记 2025/9/10 13:14:49

跨站请求是什么？

介绍跨站请求（Cross-Site Request）通常是指浏览器在访问一个网站时，向另一个域名的网站发送请求的行为。这个概念在 Web 安全中非常重要，尤其是在涉及到“跨站请求伪造（CSRF）”和“跨域资源共享&#xff…...

编程日记 2025/9/9 0:45:50

【深度学习与大模型基础】第9章-条件概率以及条件概率的链式法则

简单理解条件概率条件概率就是在已知某件事发生的情况下，另一件事发生的概率。用数学符号表示就是： P(A|B) 在B发生的前提下，A发生的概率。计算机例子：垃圾邮件过滤假设你写了一个程序来自动判断邮件是否是垃圾邮件&#xf…...

编程日记 2025/9/11 10:21:27

C++: 获取auto的实际类型

auto a "hello";auto* b "hello";auto& c "hello";上述 a, b, c 类型分别是什么？ 在不使用 IDE 提供的 inlay hints 情况下， 可以编译期获取，然后运行时打印出来: 方法： 用 decltype(var)…...

编程日记 2025/9/5 17:35:24

谷歌开源代理开发工具包（Agent Development Kit，ADK）：让多智能体应用的构建变得更简

每周跟踪AI热点新闻动向和震撼发展想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...

编程日记 2025/9/10 13:27:16

揭开人工智能与机器学习的神秘面纱：开发者的视角

李升伟编译人工智能（AI）和机器学习（ML）早已不再是空洞的流行语——它们正在彻底改变我们构建软件、做出决策以及与技术互动的方式。无论是自动化重复性任务，还是驱动自动驾驶汽车，AI/ML都是现代创新的核…...

编程日记 2025/9/6 10:38:31

35.Java线程池（线程池概述、线程池的架构、线程池的种类与创建、线程池的底层原理、线程池的工作流程、线程池的拒绝策略、自定义线程池）

一、线程池概述 1、线程池的优势线程池是一种线程使用模式，线程过多会带来调度开销，进而影响缓存局部性和整体性能，而线程池维护着多个线程，等待着监督管理者分配可并发执行的任务，这避免了在处理短时间任务时创建与…...

编程日记 2025/9/9 15:03:04

【NumPy科学计算：高性能数组操作核心指南】

目录前言：技术背景与价值当前技术痛点解决方案概述目标读者说明一、技术原理剖析核心概念图解关键技术模块技术选型对比二、实战演示环境配置要求核心代码实现运行结果验证三、性能对比测试方法论量化数据对比结果分析四、最佳实践推荐方案 ✅常见错误 ❌调试技…...

编程日记 2025/9/10 8:00:25

软考系统架构设计师系列知识点之杂项集萃（50）

接前一篇文章：软考系统架构设计师系列知识点之杂项集萃（49） 第78题著作权中，（）的保护期不受限制。 A. 发表权 B. 发行权 C. 署名权 D. 展览权正确答案：C。所属知识点：旧版…...

编程日记 2025/9/11 19:00:02

实现定长的内存池

池化技术所谓的池化技术，就是程序预先向系统申请过量的资源，然后自己管理起来，以备不时之需。这个操作的价值就是，如果申请与释放资源的开销较大，提前申请资源并在使用后并不释放而是重复利用，能够提高程序…...

编程日记 2025/9/10 19:30:51

定制一款国密浏览器(7)：铜锁和BoringSSL

上一章简单介绍了一下国密算法，本章开始进入实战，进行国密算法的移植。算法的移植以铜锁为蓝本，移植到 BoringSSL 中。 BoringSSL 也是由 OpenSSL fork 而来，那能否修改 Chromium 的源码，使用铜锁库呢？这种方式我也考虑并尝试过，最后发现两者的接口差别太大，Chromium …...

编程日记 2025/9/7 6:32:47