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

css 关于flex布局中子元素的属性flex

news 来源：原创 2025/7/18 20:02:06

css flex布局中子元素的属性flex

1. `flex` 是 `flex-grow`、`flex-shrink` 和 `flex-basis` 的简写

语法格式：

flex: [flex-grow] [flex-shrink] [flex-basis];

各属性解析：

flex-grow: 子元素如何按比例分配父元素的 剩余空间。

默认值：0（即不分配剩余空间）。
如果设置为 1 或更大值，则子元素会根据此值按比例分配剩余空间。

flex-shrink: 子元素在父容器空间不足时如何按比例收缩。

默认值：1（即允许收缩）。
设置为 0 时，子元素不会收缩。

flex-basis: 子元素在弹性布局中 初始宽度或高度的基准。

默认值：auto（即根据内容、width 或 height 等值决定）。
如果设置为具体数值（如 0px、100px 或百分比 0%、100%），则会覆盖 width 的设置。

2. 常见用法解析

单值写法

flex: 1;

等价于：

flex: 1 1 0%;

表示 flex-grow: 1，flex-shrink: 1，flex-basis: 0%（基准宽度为 0）。

三个值写法

flex: 2 0 100px;

表示

flex-grow: 2：子元素会分配两倍的剩余空间（与其他子元素按比例）。
flex-shrink: 0：子元素不会收缩。
flex-basis: 100px：子元素的基准宽度为 100px。

常用缩写模式

flex: auto

等价于 flex: 1 1 auto。
子元素会按内容大小决定基础宽度（auto），允许增长和收缩。

flex: none

等价于 flex: 0 0 auto。
子元素大小完全由内容决定，不允许增长或收缩。

3. 应用场景

示例 1: 等比例分配剩余空间

<div class="container" style="display: flex;"><div class="box1" style="flex: 1;"></div> <!-- 占一份 --><div class="box2" style="flex: 2;"></div> <!-- 占两份 -->
</div>

box1 和 box2 的行为

父元素有剩余空间，box1 占 1 份，box2 占 2 份，按照 1:2 分配。

示例 2: 固定宽度 + 自适应宽度

<div class="container" style="display: flex;"><div class="box1" style="flex: 0 0 100px;"></div> <!-- 固定宽度 100px --><div class="box2" style="flex: 1;"></div>         <!-- 剩余空间填充 -->
</div>

box1 和 box2 的行为

box1 宽度固定为 100px，不会增长或收缩。
box2 自动填充剩余空间。

4. 注意点

1.flex-basis 优先级高于 width 或 height

如果同时设置了 width 和 flex-basis，flex-basis 会覆盖 width 的值。

2.默认值

如果未设置 flex，默认值为flex:0 1 auto

不增长（flex-grow: 0）。
允许收缩（flex-shrink: 1）。
基准宽度由内容决定（flex-basis: auto）。

3.父元素的 display: flex 必须设置：

flex 属性对子元素生效的前提是父元素开启了 flex 布局。

css 关于flex布局中子元素的属性flex

css flex布局中子元素的属性flex 1. flex 是 flex-grow、flex-shrink 和 flex-basis 的简写语法格式： flex: [flex-grow] [flex-shrink] [flex-basis];各属性解析： flex-grow: 子元素如何按比例分配父元素的剩余空间。默认值：0&#…...

编程日记 2025/7/18 20:02:06

功率器件热设计基础（四）——功率半导体芯片温度和测试方法

/ 前言 / 功率半导体热设计是实现IGBT、碳化硅SiC高功率密度的基础，只有掌握功率半导体的热设计基础知识，才能完成精确热设计，提高功率器件的利用率，降低系统成本，并保证系统的可靠性。功率器件热设计基础系列文章会…...

编程日记 2025/7/13 18:56:03

OpenStack系列第四篇：云平台基础功能与操作（Dashboard）

文章目录 1. 镜像（Image）添加镜像查看镜像删除镜像 2. 卷（Volume）创建卷查看卷删除卷 3. 网络（虚拟网络）创建网络查看网络删除网络 4. 实例类型创建实例类型查看实例类型删除实例类型 4. 密钥对&#xff08…...

编程日记 2025/7/14 5:28:30

WebSocket封装

提示：记录工作中遇到的需求及解决办法文章目录前言二、背景三、WebSocket3.1 什么是 WebSocket ？为什么使用他？四、封装 WebSocket4.1 Javascript 版本4.2 Typescript 版本4.3 如何使用？五、我的痛点如何处理前言本文将介绍 WebSocket 的封装，比如：心跳机制，重连和一…...

编程日记 2025/7/14 18:53:16

面试题解，JVM的运行时数据区

一、请简述JVM运行时数据区的组成结构及各部分作用总览从线程持有的权限来看线程私有区虚拟机栈虚拟机栈是一个栈结构，由许多个栈帧组成，一个方法分配一个栈帧，线程每执行一个方法时都会有一个栈帧入栈，方法执行结束后栈帧…...

编程日记 2025/7/18 17:11:48

【Ubuntu使用技巧】Ubuntu22.04无人值守Crontab工具实战详解

一个愿意伫立在巨人肩膀上的农民...... Crontab是Linux和类Unix操作系统下的一个任务调度工具，用于周期性地执行指定的任务或命令。Crontab允许用户创建和管理计划任务，以便在特定的时间间隔或时间点自动运行命令或脚本。这些任务可以按照分钟、小时、日…...

编程日记 2025/7/17 5:04:37

Caffeine Cache Java缓存组件

缓存组件Caffeine Cache 定义介绍整合springboot用法整合spring-boot-starter-cache用法定义介绍特性高性能：基于高效并发设计和 TinyLFU 算法，命中率高。丰富策略：支持容量限制、过期时间、异步加载、自定义清理策略。统计监控&#x…...

编程日记 2025/7/13 13:58:00

电子电气架构 --- 什么是自动驾驶技术中的域控制单元（DCU）？

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师：所谓鸡汤，要么蛊惑你认命，要么怂恿你拼命，但都是回避问题的根源，以现象替代逻辑，以情绪代替思考，把消极接受现实的懦弱，伪装成乐观面对不幸的…...

编程日记 2025/7/14 16:42:00

Redis核心技术知识点全集

Redis数据结构和常用命令 1. String字符串2. Hash哈希3. List列表4. Set集合5. Sorted Set有序集合6. Redis常用命令参考Redis事务机制...

编程日记 2025/7/15 12:08:04

【每日学点鸿蒙知识】文件读写、屏幕宽度亮度、扫一扫权限、编码器问题、wlan设置

1、参照文档，在操作文件时，读取不到内容或出现程序闪退？ 参照文档，进行文件写入和读取时，出现读取不到或闪退 export function createFile() {// 获取应用文件路径let context getContext(this) as common.UIAbilit…...

编程日记 2025/7/17 7:26:25

后端开发-Maven

环境说明： windows系统：11版本 idea版本：2023.3.2 Maven 介绍 Apache Maven 是一个 Java 项目的构建管理和理解工具。Maven 使用一个项目对象模型（POM），通过一组构建规则和约定来管理项目的构建&#xf…...

编程日记 2025/7/12 17:31:54

LiteFlow 流程引擎引入Spring boot项目集成pg数据库

文章目录官网地址简要项目引入maven 所需jar包配置 PostgreSQL 数据库表使用LiteFlow配置 yml 文件通过代码方式使用 liteflow数据库sql 数据在流程中周转官网地址 https://liteflow.cc/ 简要如果你要对复杂业务逻辑进行新写或者重构，用LiteFlow最合适不过。…...

编程日记 2025/7/15 1:17:04

API 设计：从基础到最佳实践

https://levelup.gitconnected.com/api-design-101-from-basics-to-best-practices-a0261cdf8886 在本次深入研究中，我们将从基础开始，逐步了解 API 设计，并逐步实现定义卓越 API 的最佳实践。作为开发人员，您可能熟悉其中的许多…...

编程日记 2025/7/15 17:10:10

简易内存池（中）

提示：文章文章目录前言一、背景二、第二版代码用例2用例3用例4用例5 总结前言前期疑问： 本文目标： 一、背景最近二、针对上述失败用例，修改代码如下第二版代码 #include <stdbool.h> #include <stdio.h>…...

编程日记 2025/7/16 1:55:49

svn不能添加.a文件

解决办法在home目录下有一个.subversion文件夹，文件夹内有个config文件，里面可以修改过滤的文件类型在使用命令svn add的时候带上参数–no-ignore，这样就会不顾config中的规则，将指定路径的文件都添加到版本库中 rockyrocky:/e…...

编程日记 2025/7/13 16:43:21

PH47代码框架 24241231 重要更新

仪式感一下：2024年最后一天，发布 PH47 代码框架的一次重要更新。当然这并不是有意的，而是直到现在才把更新的所有工作全部做完（希望确实如此）。本次更新要点： 1、加入多IMU支持。本次更新正式加入对 MPU65…...

编程日记 2025/7/15 4:36:22

小程序信息收集（小迪网络安全笔记~

免责声明：本文章仅用于交流学习，因文章内容而产生的任何违法&未授权行为，与文章作者无关！！！ 附：完整笔记目录~ ps：本人小白，笔记均在个人理解基础上整理，…...

编程日记 2025/7/14 11:12:32

用户界面的UML建模07

4.2 抽象表示层的行为（Abstract Presentation Behaviour） AbstractForm 类定义了一组如下所示的四种操作： showForm() ， getData() ， sendConfirmation() 和sendCancellation()。在该阶段的设计过程（desig…...

编程日记 2025/7/17 0:00:14

LabVIEW手部运动机能实验系统

在运动科学、人机交互和康复训练等领域，手部运动功能的研究具有重要的应用价值。开发了一个基于LabVIEW的手部运动机能实验系统设计，该系统利用力量作为关键参数，通过实时数据采集和反馈帮助受试者完成精确的手部动作，同时为研究人…...

编程日记 2025/7/14 0:05:03

Java Map 源码解析：核心原理与应用

Java Map 源码解析：核心原理与应用 Java 的 Map 接口是集合框架中一个重要的组成部分，专门用于存储键值对。其强大的功能和灵活的实现使其在各种应用场景中得到了广泛的使用。本文面向对 Java 集合框架有一定了解的开发者，通过对 Map 接口及…...

编程日记 2025/7/16 16:15:05

基于Mosquito源码理解MQTT5.0的属性概念

MQTT 5.0协议相比之前的版本（如MQTT 3.1.1）增加了很多属性，这些属性分布于报文的可变头部（Variable Header）和有效载荷（Payload）中。这些属性大大增强了协议的可扩展性和灵活性，使其能够更好地适应现代物联网应用的复杂需求。属性的定义在源码包mosquitto-2.0.18/inc…...

编程日记 2025/7/17 8:37:33

easyui textbox使用placeholder无效

easyui textbox使用placeholder无效在easyui 的textbox控件，请使用data-options 设定示例 <input type text class easyui-textbox data-options "prompt:请输入您的邮箱"/>...

编程日记 2025/7/4 21:08:32

java AQS

什么是AQS AQS（AbstractQueuedSynchronizer，抽象队列同步器）是 Java 中并发控制的一种机制，位于 java.util.concurrent.locks 包下，它为构建锁、信号量等同步工具提供了一个框架。AQS 通过队列来管理多个线程之间的…...

编程日记 2025/7/14 20:24:11

机器人对物体重定向操作的发展简述

物体重定向操作的发展简述前言1、手内重定向和外部重定向2、重定向原语3、重定向状态转换网络4、连续任意姿态的重定向5、利用其他环境约束重定向总结Reference 前言对于一些特殊的任务（如装配和打包），对物体放置的位姿由明确的要求&#…...

编程日记 2025/7/16 21:21:08

数据结构与算法之动态规划: LeetCode 72. 编辑距离 (Ts版)

编辑距离 https://leetcode.cn/problems/edit-distance/description/ 描述给你两个单词 word1 和 word2， 请返回将 word1 转换成 word2 所使用的最少操作数你可以对一个单词进行如下三种操作： 插入一个字符删除一个字符替换一个字符示例 1 输入&…...

编程日记 2025/7/15 22:13:36

vue3 Teleport瞬移组件

Teleport是瞬移组件，也称为传送门组件它是一个可以使元素从一个组件转到另一个组件的组件。如对话框、自定义菜单、警告提示、徽章，以及许多其他需要出现在特殊位置的自定义UI组件。假设现在页面中有两个元素，分别为div元素和button按钮元…...

编程日记 2025/7/14 18:33:20

Go语言学习路线

以下是一个较为系统的Go语言学习路线： 一、基础阶段环境搭建与工具链熟悉安装Go语言开发环境。在Go官方网站（https://golang.org/dl/）下载适合您操作系统的安装包并完成安装。配置Go环境变量，如GOPATH和GOROOT。GOROOT是Go语…...

编程日记 2025/7/14 12:05:45

摄像头监视脚本

摄像头监视脚本，若检测到摄像头画面有变化，保存这一段视频一、使用方法 1.运行脚本默认参数Threshold3, Period3, path./recordings python cam.py --threshold30 --period3 --path./recordings 2.参数说明 threshold:摄像头捕获到的画面变化量阈值…...

编程日记 2025/7/15 15:28:19

【Leecode】Leecode刷题之路第97天之交错字符串

题目出处 97-交错字符串-题目出处题目描述个人解法思路： todo代码示例：（Java） todo复杂度分析 todo官方解法 97-交错字符串-官方解法方法1：动态规划思路： class Solution {public boolean isInte…...

编程日记 2025/7/14 18:01:26

MAC环境安装(卸载)软件

MAC环境安装（卸载）软件 jdknode安装node，并实现不同版本的切换背景卸载node从node官网下载pkg安装的node卸载用 homebrew 安装的node如果你感觉删的不够干净，可以再细分删除验证删除结果 jdk 1.下载jdk 先去官网下载自己需要的版…...

编程日记 2025/7/18 1:30:04

Spring Boot + Redisson 封装分布式锁

目标：一行代码调用，简单粗暴。基操：自动加锁，自动解锁，自动处理异常，自动处理锁超时等。安装 redis redisson <dependency><groupId>org.springframework.boot</groupId><artifac…...

编程日记 2025/7/13 19:31:53

从零开发一套UWB定位系统需要多长时间？UWB超宽带定位系统源码

从零开发一套UWB定位系统需要多长时间？ 从零开发一套UWB定位系统所需的时间会受到多种因素的影响，以下是详细分析： 一、系统复杂度 1、基本功能定位系统如果只是开发一个简单的UWB定位系统，仅实现基本的定位功能，如在…...

编程日记 2025/7/15 14:27:38

DataCap 2024.4.1 版本发布：MongoDB 驱动支持、工作流引擎升级

尊敬的 DataCap 用户： DataCap 2024.4.1 版本现已正式发布。本次更新包含多项重要功能升级和性能优化，现将主要更新内容公布如下： 核心功能升级数据库功能增强 (实现功能) 新增数据库管理功能：支持创建、删除和切换数据库完善表…...

编程日记 2025/7/13 12:09:29

常见端口（22、25、53、80、443、110、143、3306、6379、21）和服务的安装与配置手册

文章目录一、系统初始设置1. 系统与工具的基础配置1.1 系统更新1.2 网络连接测试1.3 工具安装 2. 防火墙配置2.1 启用防火墙服务2.2 检查默认规则2.3 开放常用端口2.4 查看已开放端口二、常见端口及其用途1. 端口 22（SSH）2. 端口 25（SMTP&a…...

编程日记 2025/7/14 19:03:21

使用maven-mvnd替换maven大大提升编译打包速度

先上结论！！！ 多模块清理并打包提升：约3.5倍多模块不清理打包提升：约5.5倍单模块提升：约2倍从计算结果来看，多模块提升的效率更高。在使用mvnd package打包多模块式，可在控制台…...

编程日记 2025/7/18 15:23:14

图像去雾 | 基于Matlab的图像去雾系统（四种方法）

图像去雾 | 基于Matlab的图像去雾系统（四种方法） 目录图像去雾 | 基于Matlab的图像去雾系统（四种方法）效果一览基本介绍程序设计参考资料效果一览基本介绍基于Matlab的图像去雾系统（四种方法） 关于图像…...

编程日记 2025/7/18 4:45:32

【Ubuntu 系统之开启远程桌面SSH登录】

【Ubuntu 系统之开启远程桌面&SSH登录】一、开启 SSH 登录二、开启远程桌面1、更新包管理器并安装 xrdp1.1、遇到错误1.2、解决方法 2、安装桌面环境（如果服务器上没有 GUI）3、配置 xrdp 使用默认的 GNOME 桌面环境4、配置防火墙允许远程桌面连接…...

编程日记 2025/7/14 12:35:42

利用 AI 生成 XMind 思维导图教程

本文将介绍如何使用 AI 工具（如 ChatGPT 等），从无到有生成层次分明、可直接导入到 XMind 的 Markdown 格式思维导图。主要步骤包括：选择主题、编写并润色 Markdown 文档、在 XMind 中进行导入与可视化。一、为什么使用 AI XMind…...

编程日记 2025/7/18 16:52:58

电子应用设计方案81：智能AI冲奶瓶系统设计

智能 AI 冲奶瓶系统设计一、引言智能 AI 冲奶瓶系统旨在为父母或照顾者提供便捷、准确和卫生的冲奶服务，特别是在夜间或忙碌时，减轻负担并确保婴儿获得适宜的营养。二、系统概述 1. 系统目标 - 精确调配奶粉和水的比例，满足不同年龄段婴…...

编程日记 2025/7/18 15:54:35

MySQL的索引

没有索引会怎么样数据库中的数据最终是存储在磁盘上的。 mysql服务器，本质上是内存进程，CURD操作全都是在内存中进行的—索引也是如此。所以，需要将数据从磁盘读进内存，才能进行操作。如果没有索引，表中的数据会向…...

编程日记 2025/7/17 0:00:42

Pytest 高级用法：间接参数化

文章目录 1. 引言2. 基础概念2.1 Fixture2.2 参数化 3. 代码实例3.1 基础设置3.2 测试用例示例示例 1：基础的间接参数化示例 2：通过 request 获取参数值示例 3：多参数组合测试示例 4：部分间接参数化 4. 最佳实践5. 总结参考资料 1…...

编程日记 2025/7/15 5:30:10

基于视觉语言模型（VLM)的CogAgent

前言 CogAgent 是由清华大学与智谱AI联合推出的一个多模态大模型，专注于图形用户界面（GUI）的理解和导航。它代表了在视觉语言模型（VLM）领域的一项重要进展，特别是在GUI Agent能力方面。相较于传统的基于文…...

编程日记 2025/7/16 4:50:01

文件传输工具FTransferor＜优化篇＞

在上一篇文章中，我们详细探讨了FTransferor文件传输工具的设计与实现，并展示了它在局域网文件传输方面的高效性。然而，随着互联网应用场景的不断丰富，传统的基于 TCP/UDP 的传输方式已经无法满足部分开发者的需求。特别是在跨平台…...

编程日记 2025/7/16 5:59:42

Index of /dist/v16.20.2/ (nodejs.org) 下载 wget https://nodejs.org/dist/v16.20.2/node-v16.20.2-linux-x64.tar.gz解压 sudo tar -zxvf node-v16.20.2-linux-x64.tar.gz 配置环境变量 sudo vim /etc/profile export NODE_HOME/usr/local/node-v16.20.2-linux-x64 ex…...

编程日记 2025/7/15 23:43:47

Spring boot + Hibernate + MySQL实现用户管理示例

安装MySQL Windows 11 Mysql 安装及常用命令_windows11 mysql-CSDN博客整体目录 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLS…...

编程日记 2025/7/14 1:35:57

Neo4j GDS 2.0 安装与配置

Neo4j GDS 2.0 安装与配置 GDS插件安装：Neo4j官方文档 1. GDS简介 Neo4j Graph Data Science (GDS) 库作为 Neo4j Graph Database 的插件提供。该插件需要安装到数据库中并在 Neo4j 配置中列入白名单。有两种主要方法可以实现这一点，我们将在本章中详…...

编程日记 2025/7/9 18:09:56