【CSS】display:flex和display: inline-flex区别

flex:将对象作为弹性伸缩盒显示
inline-flex:将对象作为内联块级弹性伸缩盒显示

DOM结构

<div class="main"><div></div><div></div><div></div><div></div></div>

flex

.main{background-color: #0f0;display: flex;/*父div设置该属性*/}               
.main>div{width: 50px;height: 50px;border: 1px solid black;
}

此时没有为父元素main设置宽度,默认为100%;
在这里插入图片描述

inline-flex

.main{background-color: #0f0;display: inline-flex;/*父div设置该属性*/}
.main>div{width: 50px;height: 50px;border: 1px solid black;
}
.main div:nth-child(2){height:60px;
}

此处虽然木有给父元素设置宽度,但是父元素默认会根据子元素的宽高去自适应。
在这里插入图片描述
总结:
导致这个效果的根本原理还是inlineblock的区别

block块类型,默认宽度为父元素宽度,可以设置宽高,会换行显示
inline行内类型,默认宽度为内容宽度,不可以设置宽高,但是可以设置水平的margin和padding,垂直方向不可以设置,同行显示

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

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

相关文章

记录 | pytorch计算ap的方法

假设当前经过标签数据与预测数据的加载&#xff0c;我们得到了下面两个变量&#xff1a; det_boxes&#xff1a;包含全部图像中所有类别的预测框&#xff0c;其中一个边框包含了[left, top, right, bottom, score, NameofImage]gt_boxes&#xff1a;包含了全部图像中所有类别的…

聚合支付备案机构如何有效应对自律监督现场检查

孟凡富 在2023年第四季度&#xff0c;部分已备案的聚合支付机构收到了中国支付清算协会的《中国支付清算协会自律检查通知书》&#xff0c;标志着对其进行的现场检查工作正式启动。此次检查的时间范围涵盖了机构从2022年9月1日至2023年8月31日的运营情况&#xff0c;内容广泛&…

Uni-App《》

1. 什么是 UniApp&#xff1f;它有什么特点&#xff1f; UniApp 是一个基于 Vue.js 的跨平台应用开发框架&#xff0c;可以使用 Vue.js 的开发语法编写一次代码&#xff0c;然后通过编译生成可以在多个平台&#xff08;包括iOS、Android、H5 等&#xff09;上运行的应用。UniAp…

HTML世界核心

目录 一、基本文档(Basic Documentation) 二、基本标签(Basic Tags) 三、文本格式化(Formatting) 四、链接(Links) 五、图片(Images) 六、样式/区块(Styles/Sections) 七、无序列表(Disorder List) 八、有序列表(Sequence List) 九、定义列表(Definin…

用户空间与内核通信(二)

文章&#xff1a;用户空间与内核通信&#xff08;一&#xff09;介绍了系统调用&#xff08;System Call&#xff09;&#xff0c;内核模块参数和sysfs&#xff0c;sysctl函数方式进行用户空间和内核空间的访问。本章节我将介绍使用netlink套接字和proc文件系统实现用户空间对内…

python入门----基础

这里写目录标题 重点虚拟环境/与//的区别/// 关于print字符串可以用号拼接单双引号转义符换行三引号 变量变量的定义变量名的命名 API库导库以及使用 注释单行注释多行注释 数据类型strboolNoneTypetype函数 交互模式介绍开启 input作用延伸 if-else条件嵌套语句逻辑运算符内容…

信号系统之窗口正弦滤波器

1 Windowed-Sinc 的策略 图 16-1 说明了 windowed-sinc 滤波器背后的思想。在**(a)**中&#xff0c;显示了理想低通滤波器的频率响应。所有低于截止频率 f c f_c fc​ 的频率都以单位振幅通过&#xff0c;而所有较高的频率都被阻挡。通带是完全平坦的&#xff0c;阻带中的衰减…

代码随想录算法训练营第三六天 | 无重叠区间、划分字母区间、合并区间

目录 无重叠区间划分字母区间合并区间 LeetCode 435. 无重叠区间 LeetCode 763.划分字母区间 LeetCode 56. 合并区间 无重叠区间 给定一个区间的集合 intervals &#xff0c;其中 intervals[i] [starti, endi] 。返回 需要移除区间的最小数量&#xff0c;使剩余区间互不重叠…

【linux】体系结构和os管理

冯诺依曼体系结构 输入单元&#xff1a;包括键盘, 鼠标&#xff0c;扫描仪, 写板等 中央处理器(CPU)&#xff1a;含有运算器和控制器等 输出单元&#xff1a;显示器&#xff0c;打印机等 这里的存储器指的是内存 三者是相互连接的&#xff0c;设备之间会进行数据的来回拷贝&am…

.NET有哪些微服务框架

1.概述 想要对.net的微服务方案进行一下调查&#xff0c;看有什么可选的方案和框架&#xff0c;与spring clound相比.net 创建微服务是相对较麻烦的。 ID名称说明1Service FabricSteeltoe是帮助.NET开发的服务接入Spring Cloud技术栈的官方支持工具。也就是说&#xff0c;微服…

STM32F1 - I2C读写EEPROM

Inter-integrated circuit 1> 实验概述2> I2C模块 - 硬件方框图3> I2C模块 - 主发送器模式4> I2C模块 - 主接收器模式 1> 实验概述 通过STM32F103内部I2C硬件模块&#xff0c; 读写EEPROM - AT24C02 2> I2C模块 - 硬件方框图 3> I2C模块 - 主发送器模式 4…

GPT-4助力我们突破思维定势

GPT-4在突破思维局限、激发灵感和促进知识交叉融合方面的作用不可小觑&#xff0c;它正逐渐成为一种有力的工具&#xff0c;助力各行业和研究领域的创新与发展。 GPT-4在突破传统思维模式、拓宽创新视野和促进跨学科知识融合方面扮演着越来越重要的角色&#xff1a; 突破思维…

【Oracle11g安装配置详细教程——详细讲解】

Oracle11g安装配置详细教程 1. 介绍2. Windows环境安装Oracle 11g步骤3. Linux环境安装Oracle 11g步骤4. 注意事项 1. 介绍 由于Oracle 11g的安装涉及到一系列复杂的步骤&#xff0c;并且每一步可能还会因为操作系统的不同&#xff08;如Windows、Linux&#xff09;而略有差异…

java 数据结构LinkedList类

目录 什么是LinkedList 链表的概念及结构 链表的结构 无头单向非循环链表 addFirst方法&#xff08;头插法&#xff09; addLast方法&#xff08;尾插法&#xff09; addIndex方法 contains方法 removeAllKey方法 size和clear方法 链表oj题 无头双向非循环链表 ad…

Paper - 使用 CombFold 组合装配实现大型蛋白质复合物的结构预测

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/136170304 CombFold: predicting structures of large protein assemblies using a combinatorial assembly algorithm and AlphaFold2 CombFold…

大公司为什么禁止SpringBoot项目使用Tomcat?

原作者&#xff1a;老杨 原文PDF链接&#xff1a;https://topjavaer.cn/advance/excellent-article/28-springboot-forbid-tomcat.html 前言 在SpringBoot框架中&#xff0c;我们使用最多的是Tomcat&#xff0c;这是SpringBoot默认的容器技术&#xff0c;而且是内嵌式的Tomcat…

ClickHouse监控及备份

第1章 ClickHouse监控概述 第2章 Prometheus&Grafana的安装 第3章 ClickHouse配置 第4章 Grafana集成Prometheus 第5章 备份及恢复

【C语言】位操作符与移位操作符练习

目录 前言&#xff1a; 1.一道变态的面试题 2.输入一个整数 n &#xff0c;输出该数32位二进制表示中1的个数。其中负数用补码表示。 方法一&#xff1a; 方法二&#xff1a; 方法三&#xff1a; 3.打印整数二进制的奇数位和偶数位 前言&#xff1a; 前篇我们学习过C语言…

【开源】JAVA+Vue.js实现城市桥梁道路管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示四、核心代码4.1 查询城市桥梁4.2 新增城市桥梁4.3 编辑城市桥梁4.4 删除城市桥梁4.5 查询单个城市桥梁 五、免责说明 一、摘要 1.1 项目介绍 基于VueSpringBootMySQL的城市桥梁道路管理系统&#xff0c;支持…

gem5学习(22):经典内存系统的一致性——Classic Memory System coherence

官网教程&#xff1a;gem5: Classic memory system coherence M5 2.0b4引入了一个经过大量重写和简化的缓存模型&#xff0c;包括一个新的一致性协议。一致性协议是用于确保多个缓存之间的数据一致性的规则和机制。这意味着在多个缓存中存储的数据将保持一致&#xff0c;以避免…