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

css flex:1；详解，配合demo效果解答

news 文章来源：https://blog.csdn.net/u014071104/article/details/132732782 2025/1/31 11:18:16

前言

给设置了display：flex的子组件设置了flex：1；就能让他填满整个容器，如果有多个就平均

flex：1；是另外三个样式属性的简写，等同

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

 我们就针对上面3个属性结合代码来进行讲解

基本demo代码如下

css

 .flex{display: flex;width: 300px;height: 300px;border:1px solid red}.flex-item{border:1px solid blue;/**我们后面的css代码都放在这里**/}

html

<body><div class="flex"><div class="flex-item"></div></div>
</body>

效果

问题：交叉轴方向为什么子元素高度填满

为什么flex-item没有设置高度，但是他就等同容器交叉轴方向的高度呢

答案： 父容器align-items默认值是stretch

这是因为，display:flex；的容器默认设置了 align-items:stretch;设置了所有一级子元素在交叉轴方向的高度，如果给容器设置成align-items: flex-start;，就能看到没设置高度的子元素成了一个点，效果如下

 问题：为什么主轴方向元素宽度没有填满父容器

答案

因为子原始默认flex-grow为0，也就是即使有足够的空间，也不自动填充

修改

.flex-item{border:1px solid blue;flex-grow: 1;/*新增*/
}

效果：子元素主轴，交叉轴都填满了父容器

 第二个例子：子元素分割主轴宽度

添加一个新的子元素样式为

.item2{background-color: pink;}

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.flex{display: flex;width: 300px;height: 300px;border:1px solid red}.flex-item{border:1px solid blue;flex-grow: 1;}.item2{background-color: pink;}</style>
</head>
<body><div class="flex"><div class="flex-item">1</div><div class="flex-item item2" >2</div></div>
</body>
</html>

预览效果

问题：为什么两个子元素宽度平均了父容器的宽度

答案

因为子元素设置了flex-grow:1;会根据子元素flex-grow的值来平均分配宽度，如果第二个设置了flex-grow：2；那第二个子元素，会占据1/3的宽度

第三个例子：子元素宽度相加超出了父容器宽度

完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.flex{display: flex;width: 300px;height: 300px;border:1px solid red}.flex-item{border:1px solid blue;width:120px;}.item2{background-color: pink;width:200px;}</style>
</head>
<body><div class="flex"><div class="flex-item">1</div><div class="flex-item item2" >2</div></div>
</body>
</html>

效果

问题：为什么子元素渲染后的宽度变小了

因为flex容器的一级子元素默认允许缩放，也就是flex-shrink:1；我们把css代码样式改为

.flex-item{border:1px solid blue;width:120px;flex-shrink: 0;/*新增*/
}

这时候，那容器就超出父元素了

第四个例子：flex-basis

样式修改

 .flex-item{border:1px solid blue;box-sizing: border-box;}.item2{background-color: pink;flex-basis:200px; /*新增代码*/width:100px;/*新增代码*/}

效果

 flex-basis设置了具体单位只后，width属性无效

那设置auto值呢

如果设置了width就读取width，否则子元素等于子元素自身的高度

其次子元素的宽度还会收到flex-grow和flex-shrink的影响

width属性的优先级别低于flex-grow和flex-shrink

第五个例子：容器呗子元素撑大

子元素嵌套display：flex的子元素容器，子元素容器背它的子元素撑大，导致文本超出无法显示省略号

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.flex {display: flex;width: 300px;height: 300px;border: 1px solid red}.flex-item {border: 1px solid blue;box-sizing: border-box;width: 100px;}.item2 {background-color: pink;flex-grow: 1;display: flex;}.innerbox {display: flex;flex: 1;outline: 2px solid brown;/* width: 100%; */}.innerbox .inner-item {/* width: 300px; */background-color: green;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow: ellipsis;}</style>
</head><body><div class="flex"><div class="flex-item">1</div><div class="flex-item item2"><div class="innerbox"><div class="inner-item">12121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212</div></div></div></div>
</body></html>

效果

解决

给子元素容器添加width:100%或者overflew：hidden;

相关文章：

css flex:1；详解，配合demo效果解答

前言 给设置了display&#xff1a;flex的子组件设置了flex&#xff1a;1&#xff1b;就能让他填满整个容器&#xff0c;如果有多个就平均 flex&#xff1a;1&#xff1b;是另外三个样式属性的简写&#xff0c;等同 flex-grow: 0; flex-shrink: 1; flex-basis: auto;我们就针…...

编程日记 2023/9/15 15:35:02

discuzQ安装

我们开始配置php,安装两个扩展。 在宝塔面板中&#xff0c;单击软件商城->已安装&#xff0c;查找已安装的 PHP 软件。 然后在 php 管理中&#xff0c;单击禁用函数&#xff0c;进入设置页面。 在列表中单击删除函数 putenv、readlink、symlink、shell_exec &#xff0c;…...

编程日记 2023/9/15 15:32:59

深入解析NLP情感分析技术：从篇章到属性

目录 1. 情感分析概述1.1 什么是情感分析&#xff1f;- 情感分析的定义- 情感分析的应用领域 1.2 为什么情感分析如此重要&#xff1f;- 企业和研究的应用- 社交媒体和公共意见的影响 2. 篇章级情感分析2.1 技术概览- 文本分类的基本概念- 机器学习与深度学习方法- 词嵌入的力量…...

编程日记 2023/9/15 15:30:58

JVM的双亲委派模型

定义与本质&#xff1a; 类加载器用来把类文件加载到JVM内存中。从JDK1.2开始&#xff0c;类加载过程采用双亲委派模型&#xff0c;保证Java平台安全。 父类委托的定义&#xff1a; 一个类加载器在接到加载类请求的时候&#xff0c;首先不会去加载这个类&#xff0c;而是把这个…...

编程日记 2023/9/15 15:29:57

js中如何判断一个变量是否为数字类型？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐使用Number.isNaN()方法⭐使用正则表达式⭐使用isNaN()函数⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个…...

编程日记 2023/9/15 15:28:56

使用阿里PAI DSW部署Stable Diffusion WebUI

进入到网址https://pai.console.aliyun.com/里边。 点击创建实例。 把实例名称填写好&#xff0c;选择GPU规格&#xff0c;然后选择实例名称是ecs.gn6v-c8g1.2xlarge。 选择stable-diffusion-webui-env:pytorch1.13-gpu-py310-cu117-ubuntu22.04&#xff0c;然后点击下一步。…...

编程日记 2023/9/15 15:26:54

redisson使用过程常见问题汇总

文章目录 常见报错1. 配置方式使用错误2. 版本差异报错3. 配置文件中配置了密码或者配置错误4. 字符集和序列化方式配置问题5. Redisson的序列化问题6. 连接池问题&#xff1a;7. Redisson的高可用性问题&#xff1a;8. Redisson的并发问题9. Redisson的性能问题 2. 参考文档 常…...

编程日记 2023/9/15 15:25:53

代码随想录训练营 DP序列

代码随想录训练营 DP序列 718. 最长重复子数组&#x1f338;code 674. 最长连续递增序列&#x1f338;code 300.最长递增子序列&#x1f338;code 最后一题很巧妙&#xff0c;不能单纯的去把DP当作板子题&#xff0c;得思考才能得到最佳方式 718. 最长重复子数组&#x1f338; …...

编程日记 2023/9/15 15:24:52

Datastage部署与使用

Datastage部署与使用 - 码农教程 https://www.cnblogs.com/lanston/category/739553.html Streamsets定时拉取接口数据同步到HBase集群_streamsets api_webmote的博客-CSDN博客 【SDC】StreamSets实战之路-28-实战篇- 使用StreamSets实时采集指定数据目录文件并写入库Kudu_菜…...

编程日记 2023/9/15 15:23:51

【实用工具】Centos 安装ARL灯塔

文章目录 docker 安装安装docker-compose配置镜像加速器ARL安装和启动 docker 安装 yum install https://download.docker.com/linux/fedora/30/x86_64/stable/Packages/containerd.io-1.2.6-3.3.fc30.x86_64.rpm yum install docker-ce (若出现无法找到包可能是镜像源问题) 更…...

编程日记 2023/9/15 15:21:49

IP地址定位基础数据采集

在互联网时代&#xff0c;IP地址定位技术已经成为了广泛应用的一项重要技术。无论是用于网络安全、广告投放、市场调研还是用户体验优化&#xff0c;IP地址定位技术都发挥着关键作用。 什么是IP地址定位&#xff1f; IP地址定位是一种技术&#xff0c;它通过IP地址来确定设备…...

编程日记 2023/9/15 15:20:49

leetcode做题笔记138. 复制带随机指针的链表

给你一个长度为 n 的链表&#xff0c;每个节点包含一个额外增加的随机指针 random &#xff0c;该指针可以指向链表中的任何节点或空节点。 构造这个链表的 深拷贝。 深拷贝应该正好由 n 个 全新 节点组成&#xff0c;其中每个新节点的值都设为其对应的原节点的值。新节点的 n…...

编程日记 2023/9/15 15:19:48

分布式文件系统的新兴力量：揭秘Alluxio的元数据管理机制【文末送书】

文章目录 写在前面01 分布式文件系统元数据的常见类型1.1 文件&#xff08;inode&#xff09;元数据1.2 数据块&#xff08;block&#xff09;元数据1.3 Worker元数据 02 分布式文件系统元数据的存储模式2.1 元数据存储在堆上&#xff08;HEAP模式&#xff09;2.2 元数据存储在…...

编程日记 2023/9/15 15:12:42

ArcGIS标注的各种用法和示例

标注是将描述性文本放置在地图中的要素上或要素旁的过程。 本文整理了ArcGIS中的各种标注方法、可能遇到的问题和细节，内容比较杂，想到哪写到哪。 一、正常标注某一字段值的内容 右键点击【属性】，在【标注】选项卡下勾选【标注此图层中的的要素】，在【文本字符串】栏中…...

编程日记 2023/9/15 15:11:40

修改ros中的控制器，便于仿真和驱动真实UR

UR机械臂学习&#xff08;5-3&#xff09;&#xff1a;驱动ur机械臂实物——问题及解决_error: 鈥榰r_msgs::setpayloadrequest {aka struct ur__冰激凌啊的博客-程序员宝宝 - 程序员宝宝 (cxybb.com) 问题5 Action client not connected: scaled_pos_traj_controller/follow_j…...

编程日记 2023/9/15 15:09:39

网络广播模块2*30W 智能4G广播终端开发模块

SV-704UG 4G网络广播模块2*30W 智能4G广播终端开发模块 一、描述 SV-704UG网络音频模块是一款带2*30W功放输出的4G广播音频模块&#xff0c;采用高性能ARM处理器及专业Codec&#xff0c;能接收4G广播音频数据流&#xff0c;转换成音频模拟信号输出。带有一路line in输入&#…...

编程日记 2023/9/15 15:08:37

优思学院｜什么是精益项目管理？

正确地使用精益思想和技术是可以减少项目中的浪费、提高客户满意度&#xff0c;并提高项目的利润率。 在现实世界中&#xff0c;项目经理的工作充满了挑战。他们不仅需要专注于产品和团队&#xff0c;还必须确保客户的满意度。同时&#xff0c;他们还必须与矩阵组织打交道&…...

编程日记 2023/9/15 15:07:36

【Android取证篇】华为设备跳出“允许USB调试“界面方法的不同方法

【Android取证篇】华为设备跳出"允许USB调试"界面方法的不同方法 华为设备在鸿蒙OS3系统之后&#xff0c;部分设备启用"允许USB调试"方式会有所变化&#xff0c;再次做个记录—【蘇小沐】 1.实验环境 系统版本Windows 11 专业工作站版22H2&#xff08;2…...

编程日记 2023/9/15 15:04:33

在VSCode中移除不必要的扩展

在VSCode中移除不必要的扩展 在VSCode中安装扩展是编辑器缓慢且耗电的主要原因之一&#xff0c;因为添加的每个新扩展都会增加应用程序的内存和 CPU 使用率。 VSCode现在已经具备了非常多的功能&#xff0c;我们可以将一些重复工作的扩展移除掉。卸载这些现在可有可无的扩展将…...

编程日记 2023/9/15 15:02:31

算法刷题记录-树(LeetCode)

783. Minimum Distance Between BST Nodes 思路(DFS 中序遍历) 考虑中序遍历的性质即可 代码 class Solution { public:int min_diffnumeric_limits<int>::max();int prevnumeric_limits<int>::min()100000;int minDiffInBST(TreeNode* root) {inorderTraversa…...

编程日记 2023/9/15 15:01:30

Linux中安装MySQL_图解_2023新

1.卸载 为了避免不必要的错误发生,先将原有的文件包进行查询并卸载 // 查询 rpm -qa | grep mysql rpm -qa | grep mari// 卸载 rpm -e 文件名 --nodeps2.将安装包上传到指定文件夹中 这里采用的是Xftp 3.将安装包进行解压 tar -zxvf 文件名 -C 解压路径4.获取解压的全路…...

编程日记 2023/9/15 15:00:29

生产设备上的静电该如何处理?

在工厂生产车间里有很多机械设备&#xff0c;在生产运作过程中&#xff0c;难免会产生大量静电&#xff0c;静电会产生许多危害。 例如&#xff0c;1、会使电子设备故障、误操作而引起的电磁干扰。 2、电子元件或集成电路的静电击穿; 3、高压静电放电引起触电; 4、静电放电引起…...

编程日记 2023/9/15 14:59:28

山洪灾害预警方案(山洪预警解决方案的组成)

​ 随着气候变化的不断加剧&#xff0c;山洪灾害在许多地区成为了极具威胁性的自然灾害之一。为了帮助地方政府和居民更好地预防和应对山洪灾害&#xff0c;我们设计了一套基于星创易联的SR600工业路由器和DTU200的山洪灾害预警方案&#xff0c;并成功在某地区进行了部署。 案…...

编程日记 2023/9/15 14:58:27

数据库 MVCC 详解

目录 1. 什么是 MVCC&#xff1f; 2. MVCC 的好处&#xff1f; 3. 快照读&#xff1f;当前读分别是什么&#xff1f;怎么理解&#xff1f; 3.1 快照读 3.2 当前读 4. 数据库的四种隔离级别 5. MVCC 实现原理 5.1 隐藏字段 5.2 undo log(版本链) 5.3 readView 6. re…...

编程日记 2023/9/15 14:57:26

process.nextTick和vue的nextTick区别

事情的起因是代码里用了nextTick&#xff0c;然后提交代码的时候才发现&#xff0c;引入的是process的&#xff0c;然后改成了使用vue的nextTick发现效果不生效了&#xff0c;然后百度查了查两者的区别&#xff1a; process.nextTick是nodejs自带的&#xff0c;而在浏览器中执…...

编程日记 2023/9/15 14:56:25

小程序实现一个 倒计时组件

小程序实现一个 倒计时组件 需求背景 要做一个倒计时&#xff0c;可能是天级别&#xff0c;也可能是日级别&#xff0c;时级别&#xff0c;而且每个有效订单都要用&#xff0c;就做成组件了 效果图 需求分析 需要一个未来的时间戳&#xff0c;或者在服务度直接下发一个未来…...

编程日记 2023/9/15 14:55:24

【四万字】网络编程接口 Socket API 解读大全

Socket 是网络协议栈暴露给编程人员的 API&#xff0c;相比复杂的计算机网络协议&#xff0c;API 对关键操作和配置数据进行了抽象&#xff0c;简化了程序编程。 本文讲述的 socket 内容源自 Linux man。本文主要对各 API 进行详细介绍&#xff0c;从而更好的理解 socket 编程。…...

编程日记 2023/9/15 14:54:23

无涯教程-JavaScript - ISREF函数

描述 如果指定的值是参考,则ISREF函数返回逻辑值TRUE。否则返回FALSE。 语法 ISREF (value) 争论 Argument描述Required/OptionalvalueA reference to a cell.Required Notes 您可以在执行任何操作之前使用此功能测试单元格的内容。 适用性 Excel 2007,Excel 2010,Exce…...

编程日记 2023/9/15 14:53:23

Android：获取MAC ＜ 安卓系统11 ＜= 获取UUID

1.核心代码 主要的UseMac.java import android.annotation.SuppressLint; import android.content.Context; import android.net.ConnectivityManager; import android.net.NetworkInfo; import android.net.wifi.WifiInfo; import android.net.wifi.WifiManager; import an…...

编程日记 2023/9/15 14:52:21

线程的几种状态

目标&#xff1a; 1. 线程的几种状态的含义 2. 状态之间的切换条件 目录 新建&#xff08;new&#xff09;线程 可运行&#xff08;Runnable&#xff09;状态 运行&#xff08;Running&#xff09;状态 阻塞&#xff08;Blocked&#xff09;状态 等待&#xff08;Waiting…...

编程日记 2023/9/15 14:51:20

网站建设运营的灵魂是什么/网站关键字排名优化

lambda 传递ref参数有个语法bug&#xff0c;必须要显式书写参数类型。 //如 delegate bool FuncType(ref int num);FuncType func1; func1 num > true; //错 func1 (ref num) > true;//错 func1 (ref int num) > true;//ok//并且,当一个参数书写类型&#xff0c;其…...

编程日记 2025/1/31 10:38:22

如何让订阅号菜单做微网站/搜什么关键词能找到网站

项目地址&#xff1a;http://www.freeteam.cn/密码设置从右侧管理菜单点击密码设置进入。输入正确的当前密码和新密码后点击修改即可。转载于:https://blog.51cto.com/3357346/2322921...

编程日记 2025/1/31 8:56:39

动态网站开发日志/亚马逊seo是什么意思

STM32通过DMA采集多通道AD 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环境&#xff1a; 主机:XP 开发环境:MDK4.23 MCU:STM32F103CBT6 说明&#xff1a; 通过脚PA1,PA2采集AD。每路AD采集10次。 参考链接:http://hi.baidu.com/kangxuebin/item/f4f43…...

编程日记 2025/1/31 8:52:31

广州网站建设咨询电话/杭州网站seo公司

Maven解决静态资源过滤问题参考文章&#xff1a; &#xff08;1&#xff09;Maven解决静态资源过滤问题 &#xff08;2&#xff09;https://www.cnblogs.com/dreamzone/p/12337848.html 备忘一下。...

编程日记 2025/1/31 3:17:26

网站外包谁报价/seo免费系统

状态&#xff1a;实例在管理平台上正常创建&#xff0c;也能vnc到实例里面使用ifconfig&#xff0c;查看IP得到我们想要的IP&#xff0c;但是在除了计算节点以外的机器ping实例就是不通。 操作&#xff1a;主要为了测试网络51删除&#xff0c;重新创建网络51&#xff0c;重新创…...

编程日记 2025/1/31 1:09:30

做一个中文域名购物网站要多少钱/如何建立个人网址

报错信息如上图所示&#xff0c;解决步骤&#xff1a; 1. 首先是检查这个MainActivity.java是不是真的存在&#xff0c;且包名和路径无误&#xff1b; 2. 如果文件存在&#xff0c;且包名和路径没有问题&#xff0c;那么就打开你项目所在的/android/app/build.gradle文件&#…...

编程日记 2025/1/31 1:04:18