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

CSS之flex布局

news 2026/3/30 8:28:43

flex布局

CSS的Flex布局（Flexible Box Layout）是一种用于在页面上布置元素的高效方法，特别适合于响应式设计。Flex布局使得元素能够伸缩以适应可用空间，可以简化很多原本需要复杂CSS和HTML结构才能实现的布局设计。

flex布局包括flex容器和flex项

flex容器属性

1.display: flex | inline-flex：启用flex布局。 flex作为块级弹性伸缩盒显示;inline-flex 作为内联块级弹性伸缩盒显示。
2.flex-direction: row | row-reverse | column | column-reverse：决定主轴的方向。
3.justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly：设置主轴上的对齐方式。
4.align-items: stretch | flex-start | flex-end | center | baseline：设置交叉轴上的对齐方式。
5.align-content: stretch | flex-start | flex-end | center | space-between | space-around：多行Flex项在交叉轴上的对齐方式（单行无效）。
6.flex-wrap: nowrap | wrap | wrap-reverse：设置flex项是否可以换行。
7.flex-flow：flex-direction 和 flex-wrap 的简写。
flex项属性
1.flex-grow：定义flex项的放大比例。
2.flex-shrink：定义flex项的缩小比例。
3.flex-basis：定义flex项在分配多余空间之前的默认大小。
4.flex：flex是flex-grow, flex-shrink和flex-basis的简写。
5.align-self：允许单个flex项有与其他项不一样的对齐方式，覆盖align-items。

举个例子

代码示例

 <body><div class="flex-container"><div class="flex-item"></div><div class="flex-item"></div><div class="flex-item"></div><div class="flex-item"></div></div></body><style>.flex-container {width: 600px;height: 200px;background-color: aquamarine;display: inline-flex;flex-direction: row;justify-content: space-between;align-items: center;}.flex-item {width: 100px;height: 100px;background-color: lightblue;}</style>

渲染示例：
在这里插入图片描述

易混淆属性总结

1.flex-grow

设置 flex 项主尺寸的 flex 增长系数，负值无效，默认为 0。flex-grow 分配剩余空间即 flex 容器的大小减去所有 flex 项的空间；

剩余空间 = 容器空间 - 所有flex项所占空间；

<body><div class="flex-container"><div class="flex-item item1"></div><div class="flex-item item2"></div><div class="flex-item item3"></div><div class="flex-item item4"></div></div></body><style>.flex-container {width: 600px;height: 200px;background-color: aquamarine;display: inline-flex;flex-direction: row;justify-content: space-between;align-items: center;}.flex-item {width: 100px;height: 100px;background-color: lightblue;}.item1 {flex-grow: 1;background-color: lightcoral;}.item2 {background-color: lawngreen;}.item3 {background-color: lightcyan;}.item4 {background-color: lightseagreen;}</style>

在这里插入图片描述
同理，有多个元素设置不同的flex-grow数值，则按照比例分配剩余空间。

2. flex-basis

指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。

 .flex-item {flex-basis: 50px;height: 100px;background-color: lightblue;}.item1 {flex-basis: max-content;background-color: lightcoral;}.item2 {background-color: lawngreen;}.item3 {background-color: lightcyan;}.item4 {background-color: lightseagreen;}

在这里插入图片描述

3. flex-shrink

flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。负值不允许。默认值 1，在默认情况下flex项宽度加一块超出容器时，会等比例缩小。

.flex-item {width: 180px;height: 100px;background-color: lightblue;flex-shrink: 0;}.item1 {flex-shrink: 1;background-color: lightcoral;}.item2 {background-color: lawngreen;}.item3 {background-color: lightcyan;}.item4 {background-color: lightseagreen;}

在这里插入图片描述
box1宽度 = 600 - 180 * 3 = 60；同理，有多个元素设置不同的flex-shrink数值，则按照比例分配空间。

4. flex:1 | 0 | auto | none

flex属性是flex-grow、flex-shrink、flex-basis三个属性的简写，默认值是flex: 0 1 auto。默认有剩余空间，不会自动放大；超出时会等比例缩小。

flex:1是flex-grow: 1;flex-shrink: 1;flex-basis: 0%;的缩写。flex-basis 0%表示0，无尺寸，以实际内容宽度为主，会覆盖设置的width。
flex:0是flex-grow: 0;flex-shrink: 1;flex-basis: 0%;的缩写。
flex:auto是flex-grow: 1;flex-shrink: 1;flex-basis: auto;的缩写。
flex:none是flex-grow: 0;flex-shrink: 0;flex-basis: auto;的缩写。

5. display: flex | inline-flex

inline-flex
代码示例

<body><div class="flex-container"><div class="flex-item item1">1</div><div class="flex-item item2">2</div><div class="flex-item item3">3</div><div class="flex-item item4">4</div></div></body><style>.flex-container {height: 200px;background-color: aquamarine;display: inline-flex;flex-direction: row;justify-content: space-between;align-items: center;}.flex-item {width: 180px;height: 100px;background-color: lightblue;}.item1 {background-color: lightcoral;}.item2 {background-color: lawngreen;}.item3 {background-color: lightcyan;}.item4 {background-color: lightseagreen;}

在这里插入图片描述
flex
代码

  display: flex;

在这里插入图片描述

CSS之flex布局

flex布局 CSS的Flex布局（Flexible Box Layout）是一种用于在页面上布置元素的高效方法，特别适合于响应式设计。Flex布局使得元素能够伸缩以适应可用空间，可以简化很多原本需要复杂CSS和HTML结构才能实现的布局设计。 flex布局包括…...

编程日记 2024/2/13 21:22:43

UnityShader——02三大主流编程语言

三大主流编程语言 Shader Language Shader language的发展方向是设计出在便携性方面可以与C/JAVA相比的高级语言，“赋予程序员灵活而方便的编程方式”，并“利用图形硬件的并行性，提高算法的效率” Shader language目前主要有 3 种语言&…...

编程日记 2024/2/13 21:21:42

Centos7安装nginx yum报错

Centos7安装nginx yum报错，yum源报错解决办法： 1、更新epel源后，出现yum报错 [roothacker117 ~]# yum install epel-release（安装成功） [roothacker117 ~]# yum install nginx（安装失败，提示如…...

编程日记 2024/2/13 21:19:40

【机组】基于FPGA的32位算术逻辑运算单元的设计（EP2C5扩充选配类）

🌈个人主页：Sarapines Programmer🔥 系列专栏：《机组 | 模块单元实验》⏰诗赋清音：云生高巅梦远游， 星光点缀碧海愁。山川深邃情难晤， 剑气凌云志自修。目录一、实验目的二、实验要求 …...

编程日记 2024/2/13 21:17:37

Asp .Net Core 系列：Asp .Net Core 集成 NLog

简介 NLog是一个基于.NET平台编写的日志记录类库，它可以在应用程序中添加跟踪调试代码，以便在开发、测试和生产环境中对程序进行监控和故障排除。NLog具有简单、灵活和易于配置的特点，支持在任何一种.NET语言中输出带有上下文的调试诊断信息…...

编程日记 2024/2/13 21:16:35

一个基于 .NET 7 + Vue.js 的前后端分离的通用后台管理系统框架 - DncZeus

前言今天给大家推荐一个基于.NET 7 Vue.js(iview-admin) 的前后端分离的通用后台权限(页面访问、操作按钮控制)管理系统框架：DncZeus。官方项目简介 DncZeus是一个基于 .NET 7 Vue.js 的前后端分离的通用后台管理系统框架。后端使用.NET 7 Entity Framework…...

编程日记 2024/2/13 21:15:32

更换商品图片日期JSON格式报错 - 序列化与反序列化日期格式设置

报错信息 msg: “服务端异常，请联系管理员JSON parse error: Cannot deserialize value of type java.util.Date from String “2023-11-13 13:13:35”: not a valid representation (error: Failed to parse Date value ‘2023-11-13 13:13:35’: Cannot parse da…...

编程日记 2024/2/13 21:11:28

FastJson、Jackson使用AOP切面进行日志打印异常

FastJson、Jackson使用AOP切面进行日志打印异常一、概述 1、问题详情使用FastJson、Jackson进行日志打印时分别包如下错误： 源码： //fastjon log.info("\nRequest Info :{} \n"， JSON.toJSONString(requestInfo)); //jackson …...

编程日记 2024/2/13 21:10:26

嵌入式大厂面试题（2）—— 富士康

从本篇开始将会更新历年来各个公司的面试题与面经，题目来自于网上各个平台以及博主自己遇到的，如果大家有所帮助，帮忙点点赞和关注吧！ 岗位：嵌入式软件工程师。面试时间：30分钟。岗位职责：官网…...

编程日记 2024/2/13 21:06:20

力扣_字符串4—编辑距离

题目给你两个单词 w o r d 1 word1 word1 和 w o r d 2 word2 word2， 请返回将 w o r d 1 word1 word1 转换成 w o r d 2 word2 word2 所使用的最少操作数。你可以对一个单词进行如下三种操作： 插入一个字符删除一个字符替换一个字符方法—动…...

编程日记 2024/2/13 21:04:18

MySQL篇----第二十篇

系列文章目录文章目录系列文章目录前言一、NULL 是什么意思二、主键、外键和索引的区别？三、你可以用什么来确保表格里的字段只接受特定范围里的值?四、说说对 SQL 语句优化有哪些方法？（选择几条）前言前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍…...

编程日记 2024/2/13 21:00:13

Promise 基础

Promise 基础理解抽象表达： Promise 是一门新的技术（ES6 规范）Promise 是 Js 中进行异步编程的新的解决方案（旧方案是使用回调函数） 具体表达从语法上来说，Promise 是一个构造函数从功能上来说&#x…...

编程日记 2024/2/13 20:57:10

RPA财务机器人之UiPath实战 - 自动化操作Excel进行财务数据汇总与分析之流程建立与数据读取、处理、汇总、分析

一、案例介绍： A公司共有13个开在不同银行的帐户，分别用于不同的业务分部或地区分部收付款。公司总部为了核算每月的收支情况，查看银行在哪个月交易量频繁，需要每月汇总各个银行的帐户借方和贷方金额，并将其净收支&am…...

编程日记 2024/2/13 20:53:07

华为机试真题实战应用【赛题代码篇】-输入整型数组和排序标识/根据排序标识flag给数组排序(附Java、C++和python代码)

目录问题描述输出描述：示例：代码实现 Java 代码2 代码3 python...

编程日记 2024/2/13 20:47:01

【算法随想录01】环形链表

题目：141. 环形链表难度：EASY 代码哈希表遍历求解，表中存储的是元素地址。时间复杂度 O ( N ) O(N) O(N)，空间复杂度 O ( N ) O(N) O(N) /*** Definition for singly-linked list.* struct ListNode {* int val;* …...

编程日记 2024/2/13 20:46:01

macOS Sonoma 14.3.1（23D60）发布

系统介绍黑果魏叔2 月 9 日消息，苹果今日向 Mac 电脑用户推送了 macOS 14.3.1 更新（内部版本号：23D60），本次更新距离上次发布隔了 17 天。魏叔查询苹果官方更新日志，macOS Sonoma 14.3.1 修复内容和 …...

编程日记 2024/2/13 20:42:56

2024-02-11 叮当鸭-平台系统-第三次重构-目标确定

摘要: 对平台系统的第三个版本，做总体规划，明确要达到的目标，功能需求，性能需求。根据这些所要达到的目标，确定选择何种的方案。方案的成本评估单独进行，本文重点分析要达到的各种目标。功能需求: 能和…...

编程日记 2024/2/13 20:39:53

Android7.0-Fiddler证书问题

一、将Fiddler的证书导出到电脑，点击Tools -> Options -> HTTPS -> Actions -> Export Root Certificate to Desktop 二、下载Window版openssl， 点击这里打开页面，下拉到下面，选择最上面的64位EXE点击下载安装即可安…...

编程日记 2024/2/13 20:38:52

Kotlin：单例模式(项目使用实例)

摘要单例模式主要的五种如下： 饿汉式懒汉式线程安全的懒汉式双重校验锁式（Double Check)静态内部类式一、项目使用单例模式实例场景 app在运行时缓存部分数据，作为全局缓存数据，以便其他页面及时更新页面对应状态的数据&…...

编程日记 2024/2/13 20:26:10

vue百度地图的和element输入框/v-region的联动

vue百度地图的使用第一步：安装插件第二步：main.js中引用第三步：页面中使用第一步：安装插件 npm install vue-baidu-map --save第二步：main.js中引用 // 百度地图 import BaiduMap from vue-baidu-map Vue.use(Baid…...

编程日记 2024/2/13 20:22:06

基于StructBERT的短视频评论情感分析系统搭建

基于StructBERT的短视频评论情感分析系统搭建 1. 引言短视频平台每天产生海量用户评论，这些评论蕴含着用户对内容的真实感受和反馈。传统的人工审核方式效率低下，难以应对实时海量的评论数据。而基于StructBERT的情感分析系统能够自动识别评论的情感倾…...

编程新知 2026/3/30 8:25:26

机械原理课程设计洗瓶机机构设计（设计说明书+3张CAD图纸+连杆机构设计软件）

洗瓶机作为工业清洗领域的核心设备，其机构设计的合理性直接影响清洗效率与质量。机械原理课程设计中的洗瓶机机构设计，聚焦于通过连杆机构实现瓶体的连续输送、定位与翻转，确保清洗液均匀覆盖瓶内壁。设计核心在于构建多自由度运动系统&#…...

编程新知 2026/3/30 8:07:19

攻克Hugo-PaperMod菜单故障：导航异常的系统化解决策略

攻克Hugo-PaperMod菜单故障：导航异常的系统化解决策略【免费下载链接】hugo-PaperMod A fast, clean, responsive Hugo theme. 项目地址: https://gitcode.com/GitHub_Trending/hu/hugo-PaperMod Hugo-PaperMod作为一款轻量级静态站点生成主题，…...

编程新知 2026/3/30 6:42:53

FLUX.1-dev像素艺术模型效果对比：原生FLUX.1-dev vs Pixel Dream微调版差异

FLUX.1-dev像素艺术模型效果对比：原生FLUX.1-dev vs Pixel Dream微调版差异 1. 像素艺术生成技术概览像素艺术作为一种独特的数字艺术形式，近年来在游戏开发、NFT创作和数字设计领域重新焕发活力。传统像素艺术创作需要艺术家手动绘制每个像素点&…...

编程新知 2026/3/30 6:24:51

OpenClaw × 88API：不用注册 Anthropic，5 分钟让 AI Agent 接入 Claude 4.6（2026 完整教程）

折腾了两天，最后 5 分钟搞定上周我想用 OpenClaw 搭一个能自动重构代码的 Agent。选定 Claude 4.6 当大脑——毕竟它在 Tool Use 精准度和长上下文推理上确实是第一梯队。结果卡在了第一步：Anthropic 官方账号注册要海外手机号，好不容易注…...

编程新知 2026/3/30 6:06:38

为什么92%的Java边缘项目因Classloader泄漏失败？揭秘3层隔离沙箱设计与实时热替换机制

第一章：Java边缘计算轻量级运行时开发概览边缘计算场景对运行时环境提出严苛要求：低内存占用（通常 ≤ 64MB）、毫秒级冷启动、有限依赖、原生支持资源约束设备（如 ARM64 IoT 网关、工业 PLC）。Java 生态传统…...

编程新知 2026/3/30 5:40:25

Java 25正式支持ZGC 2.0仅剩72小时！你还没掌握这8个颠覆性调优参数？

第一章：ZGC 2.0在Java 25中的里程碑意义与演进全景ZGC 2.0 是 Java 25 中最具突破性的垃圾回收器升级，标志着低延迟 GC 技术从“亚毫秒停顿”正式迈向“纳秒级停顿保障”的新纪元。它不再仅依赖染色指针（Colored Pointers）和读屏障…...

编程新知 2026/3/30 5:24:20

智能车小白也能懂的舵机PD控制：从电感差比和到方向控制，保姆级避坑指南

智能车方向控制入门：用PD算法驯服你的舵机第一次看到智能车在赛道上流畅过弯时，很多人都会好奇——这辆小车是如何感知赛道边界并精准控制方向的？作为电磁组智能车的核心部件，舵机就像车辆的"方向盘"，而PD控…...

编程新知 2026/3/30 5:16:16

泛微E9 OA流程表单右上角加按钮？用Ecode 5分钟搞定（附完整代码）

泛微E9流程表单5分钟极速加装功能按钮实战指南每次接到"明天就要上线"的需求时，IT部门的咖啡机总是格外忙碌。上周三下午4点，我正收拾背包准备下班，业务部门的小王火急火燎地冲进办公室："老师！采购流程…...

编程新知 2026/3/30 4:49:58

PyTorch张量操作实战：从基础运算到高效数据处理

1. PyTorch张量基础：从零开始理解多维数组第一次接触PyTorch张量时，我完全被这个看似复杂的概念搞懵了。直到有一天，我把张量想象成俄罗斯套娃，突然就豁然开朗了。最外层的套娃是最高维度，每打开一层就降一个维度&…...

编程新知 2026/3/30 3:55:14