css flex:1;详解,配合demo效果解答

前言

给设置了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;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/71449.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Grafana之魔法:揭秘数据可视化的艺术

在数据驱动的时代&#xff0c;如何有效地呈现和理解数据成为了每个组织和个人的核心任务。Grafana作为一个领先的开源数据可视化工具&#xff0c;为我们提供了强大的功能和灵活性。本文将深入探讨Grafana的魔法&#xff0c;以及它如何帮助我们更好地理解数据。 Grafana简介 G…

9月7日扒面经

redis缓存用在哪里&#xff0c;用本地缓存行不行? 数据库查询缓存&#xff0c;减小数据源压力&#xff0c;提高响应速度 页面缓存&#xff1a;将页面的渲染结果缓存在Redis中&#xff0c;以减少页面生成的时间和服务器负载。 频繁计算结果缓存&#xff1a;将频繁计算的结果…

【Unity每日一记】WheelColider组件汽车游戏的关键

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…

线性代数的学习和整理18:什么是维度,什么是秩?秩的各种定理秩的计算 (计算部分未完成)

目录 0 问题引出&#xff1a;什么是秩&#xff1f; 概念备注&#xff1a; 1 先厘清&#xff1a;什么是维数&#xff1f; 1.1 真实世界的维度数 1.2 向量空间的维数 1.2.1 向量空间&#xff0c;就是一组最大线性无关的向量组/基张成的空间 1.3 向量α的维数 1.3.1 向量的…

认识doubbo和rpc

开个新坑&#xff0c;和大家一起学习Dubbo 3.X。我们按照一个由浅入深顺序来学习&#xff0c;先从使用Dubbo开始&#xff0c;再深入Dubbo的核心原理。 今天我们就从认识Dubbo开始&#xff0c;整体的内容可以分为3个部分&#xff1a; Dubbo是什么RPC是什么Dubbo的架构 正式开…

使用navicate快速将Excel中的数据导入到数据库

表名称上右键&#xff0c;导入向导 这种方式速度还是很快的&#xff0c;18万条数据&#xff0c;3分钟左右就导入进去了。

postgresql-多表连接

postgresql-多表连接 内连接查询左外连接查询右外连接查询全外连接查询交叉连接查询简写 总结 内连接查询 内连接用于返回两个表中匹配的数据行&#xff0c;使用关键字INNER JOIN表示&#xff0c;也可以简写成JOIN&#xff1b; selecte.first_name ,d.department_id fromcps…

zookeeper 3.8.1安装和入门使用

1、zookeeper环境搭建&#xff08;Windows单机版&#xff09; 1.1、 前提 必须安装jdk 1.8&#xff0c;配置jdk环境变量&#xff0c;步骤略 1.2、安装zookeeper 地址&#xff1a;https://zookeeper.apache.org/ 1.2.1、选择releases版本 1.2.2、下载安装包并解压 1.2.3、配…

网络丢包问题,敢不敢这样定位?

下午好&#xff0c;我的网工朋友。 所谓丢包&#xff0c;是指在网络数据的收发过程中&#xff0c;由于种种原因&#xff0c;数据包还没传输到应用程序中&#xff0c;就被丢弃了。 这些被丢弃包的数量&#xff0c;除以总的传输包数&#xff0c;也就是我们常说的丢包率。 丢包…

3种轻量化框架总结

一般的卷积神经网络的参数量和计算量都很大&#xff0c;很难应用在资源有限的场景中。为了解决这个问题&#xff0c;通常是在训练好的模型上进行优化&#xff0c;如通过对模型压缩减少计算量和存储成本&#xff0c;也可以通过剪枝连接方法去掉了不重要的神经元连接或者通道修剪…

无涯教程-JavaScript - BESSELY函数

描述 BESSELY函数针对x的指定顺序和值返回Bessel函数Yn(x)(也称为Weber函数或Neumann函数)。 语法 BESSELY(X, N)争论 Argument描述Required/OptionalXThe value at which to evaluate the function.RequiredNThe order of the function. If n is not an integer, it is tr…

Spring中Endpoint、HasFeatures、NamedFeature和Actuator的关系及实现原理

文章目录 1. 关系缘由2. Actuator简介及简单使用3. Endpoint和Actuator的关系4. Endpoint和HasFeatures的关系5. Endpoint和HasFeatures原理解析5.1 Endpoint的实现原理5.2 HasFeatures的实现原理 6. 个人闲谈 1. 关系缘由 我们经常可以在Springboot中看到Endpoint注解&#x…

什么牌子的led台灯质量好?热门的Led护眼台灯推荐

led台灯有环保无污染、耗能低、长寿命等优点&#xff0c;适合用在阅读、书写、批阅等办公或学习的场所。而挑选LED台灯时&#xff0c;分散光挡板做的比较好的优先选择&#xff0c;能分散大量蓝光&#xff0c;对眼睛危害较小。下面&#xff0c;小编为大家推荐五款质量好的led护眼…

EF框架基础应用入门

文章目录 一、介绍二、EF6框架基础1. 数据模型和实体类2. 数据库上下文&#xff08;DbContext&#xff09;介绍3. 配置数据模型与数据库表的映射关系 两种方式Fluent API和数据注解Fluent API数据注解 4. 数据库迁移&#xff08;Migration&#xff09;概述a. 创建初始迁移b. 更…

Vulnhub: Masashi: 1靶机

kali&#xff1a;192.168.111.111 靶机&#xff1a;192.168.111.236 信息收集 端口扫描 nmap -A -sC -v -sV -T5 -p- --scripthttp-enum 192.168.111.236查看80端口的robots.txt提示三个文件 snmpwalk.txt内容&#xff0c;tftp服务在1337端口 sshfolder.txt内容&#xff0c…

日200亿次调用,喜马拉雅网关的架构设计

说在前面 在40岁老架构师 尼恩的读者社区(50)中&#xff0c;很多小伙伴拿到一线互联网企业如阿里、网易、有赞、希音、百度、滴滴的面试资格。 最近&#xff0c;尼恩指导一个小伙伴简历&#xff0c;写了一个《API网关项目》&#xff0c;此项目帮这个小伙拿到 字节/阿里/微博/…

管理类联考——数学——汇总篇——知识点突破——数据分析——计数原理——减法原理除法原理

减法原理 正面难则反着做(“ − - −”号) 【思路】当出现“至少、至多”、“否定用语"等正面较难分类的题目&#xff0c;可以采用反面进行求解&#xff0c;注意部分反面的技巧以及“且、或"的反面用法。 除法原理 看到相同&#xff0c;定序用除法消序( “ &quo…

python批量下载csdn文章

声明&#xff1a;该爬虫只可用于提高自己学习、工作效率&#xff0c;请勿用于非法用途&#xff0c;否则后果自负 功能概述&#xff1a; 根据待爬文章url(文章id)批量保存文章到本地&#xff1b;支持将文中图片下载到本地指定文件夹&#xff1b;多线程爬取&#xff1b; 1.爬取…

插入排序——希尔排序

1、简述&#xff1a; 希尔排序(Shells Sort)是插入排序的一种又称“缩小增量排序”&#xff08;Diminishing Increment Sort&#xff09;&#xff0c;是直接插入排序算法的一种更高效的改进版本。希尔排序是非稳定排序算法。该方法因 D.L.Shell 于 1959 年提出而得名。 希尔排…

[杂谈]-快速了解直接内存访问 (DMA)

快速了解直接内存访问 (DMA) 文章目录 快速了解直接内存访问 (DMA)1、使用 DMA 需要什么&#xff1f;2、DMA介绍3、DMA 中的数据传输如何进行&#xff1f;4、DMA接口5、DMAC 控制器寄存器6、DMA 控制器编程模式6.1 突发模式&#xff08;Burst Mode&#xff09;6.2 循环窃取模式…