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

CSS之flex布局

news 2026/5/20 2:27:30

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

Ubuntu 16.04 32位系统下RT-Thread开发环境搭建全攻略

1. 项目概述：为何要重温一个“过时”的旧系统环境？如果你在2024年看到这个标题，第一反应可能是：“Ubuntu 16.04？还是32位？这都什么年代的配置了，现在不都用Ubuntu 22.04或者24.04了吗&#xff1…...

编程新知 2026/5/20 2:14:55

8051单片机sbit位操作失效问题与volatile解决方案

1. 问题现象与背景解析在8051单片机开发中，我们经常需要对寄存器或内存中的特定位进行操作。Keil C51编译器提供了sbit关键字来实现位寻址功能，这是一种非常高效的位操作方式。但在实际开发中，不少工程师遇到过这样的困扰：明明在代…...

编程新知 2026/5/20 1:26:41

iGnav RTK/INS紧组合：从算法理论到代码实现的深度解析

1. RTK/INS紧组合技术概述 RTK（实时动态定位）和INS（惯性导航系统）的紧组合技术是当前高精度导航定位领域的重要发展方向。简单来说，RTK通过接收卫星信号实现厘米级定位，但在信号遮挡环境下性能下降&#xf…...

编程新知 2026/5/20 0:54:57

OpenPLC Editor：零成本开启工业自动化编程的完整解决方案

OpenPLC Editor：零成本开启工业自动化编程的完整解决方案【免费下载链接】OpenPLC_Editor 项目地址: https://gitcode.com/gh_mirrors/ope/OpenPLC_Editor 在工业自动化领域，PLC编程一直被视为专业工程师的专属技能，高昂的商业软件许…...

编程新知 2026/5/20 0:32:08

C++11多线程与线程管理

一、线程基础 1.1 thread默认构造函数 std::thread::thread() _NOEXCEPT {_Thr_set_null(_Thr); }默认构造函数创建一个空线程对象，不关联任何执行线程。 1.2 thread带参数构造函数 explicit thread(Fn &&, Args &&...);可变参数模板，可…...

编程新知 2026/5/20 0:18:54

前端开发从入门到精通：Vue3+TypeScript实战教程

一、为什么软件测试从业者要学Vue3TypeScript在软件测试领域，尤其是自动化测试和性能测试方向，懂前端开发技术早已不是加分项，而是必备技能。作为测试从业者，掌握Vue3TypeScript能为你的职业发展带来多重优势：&#xf…...

编程新知 2026/5/19 23:02:00

别再为交叉项头疼了！手把手教你用MATLAB时频工具箱搞定WVD、PWVD和SPWVD

别再为交叉项头疼了！手把手教你用MATLAB时频工具箱搞定WVD、PWVD和SPWVD 信号处理工程师和研究者们常常面临一个棘手问题：如何从复杂的非平稳信号中提取清晰的时频特征？Wigner-Ville分布（WVD）系列方法作为经典解决方案…...

编程新知 2026/5/19 22:43:07

别只盯着TPS！用JMeter汇总报告做一次完整的性能瓶颈分析实战

别只盯着TPS！用JMeter汇总报告做一次完整的性能瓶颈分析实战在性能测试领域，JMeter的汇总报告（Summary Report）是最常用的监听器之一，但很多测试工程师往往只关注其中的TPS（每秒事务数）指标&am…...

编程新知 2026/5/19 22:16:48

农业深度视觉：探究 YOLO 算法在植物叶片病害分类中的应用效能

点击蓝字关注我们关注并星标从此不迷路计算机视觉研究院公众号ID｜计算机视觉研究院学习群｜扫码在主页获取加入方式https://pmc.ncbi.nlm.nih.gov/articles/PMC12750877/pdf/13040_2025_Article_497.pdf计算机视觉研究院专栏Column of Computer Vision In…...

编程新知 2026/5/19 22:12:07

NGSIM数据集：如何成为自动驾驶算法开发的‘黄金标准’测试集？

NGSIM数据集：自动驾驶算法开发的黄金标准与实战指南在自动驾驶技术快速迭代的今天，算法验证的可靠性直接决定了系统落地的安全性。而NGSIM数据集凭借其0.1秒级高精度采样和真实人类驾驶行为记录，已成为行业公认的算法测试基准。不同于合成数…...

编程新知 2026/5/19 21:36:17