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

CSS之flex布局

news 2025/12/16 7:41:33

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

龙虎榜——20250610

上证指数放量收阴线，个股多数下跌，盘中受消息影响大幅波动。深证指数放量收阴线形成顶分型，指数短线有调整的需求，大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技代表标的：御银股份、雄帝科技驱动…...

编程新知 2025/12/16 3:57:53

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法配置通过调谐文件来调整相机行为使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包文章来源： http://raspberry.dns8844.cn/documentation 原文网址配置大多数用例自动工作，无需更改相机配置。但是，一…...

编程新知 2025/12/13 8:43:37

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2025/12/13 22:50:42

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码注：文档 https://developers.weixin.qq…...

编程新知 2025/12/15 8:43:18

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题：3564. 季节性销售分析题目： 表：sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/10/5 19:58:27

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包（Closure）？闭包有什么应用场景和潜在问题？2.解释 JavaScript 的作用域链（Scope Chain） 二、原型与继承3.原型链是什么？如何实现继承&a…...

编程新知 2025/12/10 17:29:53

tree 树组件大数据卡顿问题优化

问题背景项目中有用到树组件用来做文件目录，但是由于这个树组件的节点越来越多，导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多，导致的浏览器卡顿，这里很明显就需要用到虚拟列表的技术&…...

编程新知 2025/12/11 3:28:30

面向无人机海岸带生态系统监测的语义分割基准数据集

描述：海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而，目前该领域仍面临一个挑战，即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

编程新知 2025/11/26 16:19:28

人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验，我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性人工智能正在深刻地改变教育，这并非炒作，而是已经发生的巨大变革。教育机构和教育者不能忽视它，试图简单地禁止学生使…...

编程新知 2025/12/10 1:24:24

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用引言随着无人机（无人驾驶飞行器，UAV）技术的快速发展，其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统，无人机的“黑飞”&…...

编程新知 2025/12/11 8:46:55