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

dispaly: inline-flex 和 display: flex 的区别

article 2026/1/2 22:52:11

display: inline-flex 和 display: flex 都是 CSS 中用于创建弹性盒子布局（Flexbox）的属性值，但它们之间有一些关键的区别，主要体现在元素如何在页面上被渲染和它们对周围元素的影响。

主要区别


1，块级 vs 行内块级
display: flex：将一个元素设置为块级弹性容器。这意味着它会像其他块级元素（如 <div>）一样开始新的一行，并且可以设置宽度、高度等属性，不会与其他块级元素在同一行显示。
display: inline-flex：将一个元素设置为行内块级弹性容器。与 inline-block 类似，它允许该元素与其他行内元素在同一行显示，而不会强制新行开始。但是，它仍然保持了作为弹性容器的所有功能。

2，外部显示类型（External Display Type）
对于 display: flex，其外部显示类型为块级（block），这意味着它遵循块级元素的布局规则。
而 display: inline-flex 的外部显示类型为行内块级（inline-block），这使得它可以和其他行内元素一起出现在同一行内，除非空间不足导致换行。

3，布局影响
使用 display: flex 时，该元素会占据整个可用宽度（如果未明确指定宽度的话），并且通常会独占一行。
使用 display: inline-flex 时，元素仅占用其内容所需的宽度，并允许其他行内或行内块级元素与其并排显示在同一行中。

下面来看代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.flex .box {width: 500px;background: yellow;display: flex;justify-content: space-between;}.inline-flex .box {width: 500px;background: pink;display: inline-flex;justify-content: space-between;}</style>
</head><body><div class="flex"><div class="box"><span>123</span><span>456</span></div><span>额外的</span></div><div class="inline-flex"><div class="box"><span>123</span><span>456</span></div><span>额外的</span></div>
</body></html>

效果图

相关文章：

dispaly: inline-flex 和 display: flex 的区别

display: inline-flex 和 display: flex 都是 CSS 中用于创建弹性盒子布局&#xff08;Flexbox&#xff09;的属性值&#xff0c;但它们之间有一些关键的区别&#xff0c;主要体现在元素如何在页面上被渲染和它们对周围元素的影响。 主要区别 1&#xff0c;块级 vs 行内块级 d…...

编程日记 2025/12/27 7:08:38

性能比拼: Elixir vs Go(第二轮)

本内容是对知名性能评测博主 Anton Putra Elixir vs Go (Golang) Performance Benchmark (Round 2) 内容的翻译与整理, 有适当删减, 相关指标和结论以原作为准 这是第二轮关于 Elixir 和 Go 的对比测试。我收到了一份来自 Elixir 创作者的 Pull Request &#xff0c;并且我认为…...

编程日记 2025/12/29 0:22:37

鸿蒙NEXT开发键值型数据工具类（ArkTs）

import { AppUtil } from ./AppUtil; import { distributedKVStore } from kit.ArkData; import { BusinessError } from kit.BasicServicesKit;/*** 键值型数据库工具类* author CSDN-鸿蒙布道师* since 2025/04/18*/ export class KvUtil {private static kvStore: distribut…...

编程日记 2025/12/19 5:24:12

【数字图像处理】立体视觉信息提取

双目立体视觉原理 设一个为参考平面&#xff0c;一个为目标平面。增加了一个摄像头后&#xff0c;P与Q在目标面T上有分别的成像点 双目立体视觉&#xff1a;从两个不同的位置观察同一物体&#xff0c;用三角测量原理计算摄像机到该物体的距离的 方法 原理&#xff1a;三角测量…...

编程日记 2025/12/27 12:57:42

Linux ssh免密登陆设置

使用 ssh-copy-id 命令来设置 SSH 免密登录&#xff0c;并确保所有相关文件和目录权限正确设置&#xff0c;可以按照以下步骤进行&#xff1a; 步骤 1&#xff1a;在源服务器&#xff08;198.120.1.109&#xff09;生成 SSH 密钥对 如果还没有生成 SSH 密钥对&#xff0c;首先…...

编程日记 2025/12/10 23:44:57

CentOS7执行yum命令报错 Could not retrieve mirrorlist http://mirrorlist.centos.org

CentOS7执行yum命令报错 引更新yum源备份原有源创建新的源文件清理并重建缓存 引 CentOS 7 系统无法连接到 CentOS 的官方镜像站点。这通常是由于网络问题或 CentOS 7 已停止维护导致的&#xff08;2024年6月30日后 CentOS 7 已进入 EOL&#xff09; 报错明细&#xff1a; 已…...

编程日记 2025/12/11 0:38:22

【漏洞复现】Struts2系列

【漏洞复现】Struts2系列 1. 了解Struts21. Struts2 S2-061 RCE &#xff08;CVE-2020-17530&#xff09;1. 漏洞描述2. 影响版本3. 复现过程 1. 了解Struts2 Apache Struts2是一个基于MVC设计模式的Web应用框架&#xff0c;会对某些标签属性&#xff08;比如 id&#xff09;的…...

编程日记 2025/12/30 14:30:12

Sentinel源码—5.FlowSlot借鉴Guava的限流算法二

大纲 1.Guava提供的RateLimiter限流使用示例 2.Guava提供的RateLimiter简介与设计 3.继承RateLimiter的SmoothBursty源码 4.继承RateLimiter的SmoothWarmingUp源码 3.继承RateLimiter的SmoothBursty源码 (1)SmoothBursty的初始化流程 (2)SmoothBursty的初始化完成后的变量…...

编程日记 2025/12/28 12:32:16

下载electron 22.3.27 源码错误集锦

下载步骤同 electron源码下载及编译_electron源码编译-CSDN博客 问题1 从github 下载 dugite超时&#xff0c;原因没有找到 Validation failed. Expected 8ea2d0d3c9d9e4615069913207371ffe892dc10fb93975972f2f6e668f2e3b3a but got e3b0c44298fc1c149afbf4c8996fb92427ae41e…...

编程日记 2025/12/22 17:34:35

安卓的桌面 launcher是什么

安卓的桌面Launcher是一种安卓应用程序&#xff0c;它主要负责管理和展示手机主屏幕的界面以及相关功能&#xff0c;为用户提供与设备交互的主要入口。以下是其详细介绍&#xff1a; 功能 主屏幕管理&#xff1a;用户可以在主屏幕上添加、删除和排列各种应用程序图标、小部件…...

编程日记 2025/12/11 1:08:40

基础数学知识-线性代数

1. 矩阵相乘 c i j = a i k ∗ b k j c_{ij} = a_{ik} * b_{kj} cij​=aik​∗bkj​ 1. 范数 1. 向量的范数 任意一组向量设为 x ⃗ = ( x 1 , x 2 , . . . , x N ) \vec{x}=(x_1,x_2,...,x_N) x =(x1​,x2​,...,xN​) 如下： 向量的1范数： 向量的各个元素的绝对值之和∥ …...

编程日记 2025/12/10 13:39:21

kubeadm极速部署Kubernetes 1.26.X 版本集群

1.1 Kubernetes 1.26版本集群部署环境准备 1.1.1 主机操作系统说明 序号操作系统及版本备注1CentOS7u9 1.1.2 主机硬件配置说明 需求CPU内存硬盘角色主机名值4C8G100GBmastermaster01值4C8G100GBworker(node)node01值4C8G100GBworker(node)node02 1.1.3 主机配置 1.1.3.1…...

编程日记 2025/12/10 14:16:35

重构未来智能：Anthropic 解码Agent设计哲学三重奏

第一章 智能体进化论&#xff1a;从工具到自主体的认知跃迁 1.1 LLM应用范式演进图谱 阶段技术形态应用特征代表场景初级阶段单功能模型硬编码规则执行文本摘要/分类进阶阶段工作流编排多模型协同调度跨语言翻译流水线高级阶段自主智能体动态决策交互编程调试/客服对话 1.1.…...

编程日记 2025/12/30 22:39:05

互联网大厂Java面试：微服务与分布式系统挑战

互联网大厂Java面试&#xff1a;微服务与分布式系统挑战 在互联网的大潮中&#xff0c;无数程序员怀揣着梦想&#xff0c;希望能在一线大厂找到自己的位置。今天的故事主角是马飞机&#xff0c;一位充满幽默感但技术略显水货的程序员。他来到了一家知名互联网公司参加Java开发…...

编程日记 2025/12/11 1:56:44

Gradle与Idea整合

文章目录 1. Groovy 简介2. Groovy 安装[非必须]3. 在idea中创建java工程 1. Groovy 简介 在某种程度上&#xff0c;Groovy可以被视为Java的一种脚本化改良版,Groovy也是运行在JVM上&#xff0c;它可以很好地与Java代码及其相关库进行交互操作。它是一种成熟的面向对象编程语言…...

编程日记 2025/12/28 11:13:17

基于springboot+vue的校园二手物品交易平台

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…...

编程日记 2025/12/28 5:11:02

PoCL环境搭建

PoCL环境搭建 **一.关键功能与优势****二.设计目的****三.测试步骤**1.创建容器2.安装依赖3.编译安装pocl4.运行OpenCL测试程序 Portable Computing Language (PoCL) 简介 Portable Computing Language (PoCL) 是一个开源的、符合标准的异构计算框架&#xff0c;旨在为 OpenCL…...

编程日记 2025/6/18 15:33:42

【前端Skill】点击目标元素定位跳转IDE中的源代码

参考&#xff1a;https://juejin.cn/post/7326002010084311079 快手开源项目&#xff1a; https://github.com/zh-lx/code-inspector 目前在umi项目中用到 记录一下umi项目中如何使用 安装 npm i code-inspector-plugin -D --registryhttps://registry.npmmirror.com/ 配…...

编程日记 2025/12/11 0:00:02

OpenCV图像上加数字水印示例

OpenCV计算机视觉开发实践&#xff1a;基于Qt C - 商品搜索 - 京东 14.1 基本概念 当今&#xff0c;生成式人工智能&#xff08;Artificial Intelligence Generated Content&#xff0c;AIGC&#xff09;的火爆引燃了数字水印&#xff0c;说实话数字水印并不是一项新的技术&…...

编程日记 2026/1/1 10:07:13

Python爬虫从入门到实战详细版教程Char01：爬虫基础与核心技术

1.1 什么是网络爬虫？ 1.1.1 定义与分类 网络爬虫：互联网世界的“信息捕手” 网络爬虫（Web Crawler），又称网络蜘蛛或网络机器人，是一种通过预设规则自动访问网页、提取数据的程序系统。从技术视角看，其核心任务是通过模拟浏览器行为向目标服务器发起请求，解析网页内容…...

编程日记 2025/12/28 22:14:06

使用blob文件流

1.后端 GetMapping(value "/static/**")public void view(HttpServletRequest request, HttpServletResponse response) {// ISO-8859-1 > UTF-8 进行编码转换String imgPath extractPathFromPattern(request);if(oConvertUtils.isEmpty(imgPath) || imgPath&q…...

编程日记 2025/12/22 6:32:31

Day-1 漏洞攻击实战

实训任务1 漏洞攻击实战一 使用 御剑 得到网站后台地址 数据库登录与日志配置​​ 使用默认密码 root:root 登录phpMyAdmin&#xff0c;执行 SHOW VARIABLES LIKE general% 查看日志状态。 开启日志功能&#xff1a;set global general_log "ON";&#xff08;配图&…...

编程日记 2025/12/31 11:02:09

AOSP Android14 Launcher3——RecentsView最近任务数据加载

最近任务是Launcher中的一个重要的功能&#xff0c;显示用户最近使用的应用&#xff0c;并可以快速切换到其中的应用&#xff1b;用户可以通过底部上滑停顿进入最近任务&#xff0c;也可以在第三方应用底部上滑进最近任务。 这两种场景之前的博客也介绍过&#xff0c;本文就不…...

编程日记 2025/12/29 14:21:24

基于深度学习的校园食堂菜品智能结算系统

校园食堂菜品智能结算系统说明文档 1. 系统概述 本系统是一款基于YOLO深度学习算法的校园食堂菜品智能结算平台&#xff0c;旨在通过计算机视觉技术实现食堂菜品的自动识别与结算&#xff0c;提高结算效率&#xff0c;减少人工成本&#xff0c;优化用户体验。系统采用PyQt5框…...

编程日记 2025/12/28 12:28:23

【UniApp】Vue2 scss 预编译器默认已由 node-sass 更换为 dart-sass

从 HBuilderX 4.56 &#xff0c;vue2 项目也将默认使用 dart-sass 预编译器。 vue2开发者sass预处理注意&#xff1a; sass的预处理器&#xff0c;早年使用node-sass&#xff0c;也就是vue2最初默认的编译器。 sass官方推出了dart-sass来替代。node-sass已经停维很久了。 另…...

编程日记 2025/12/28 18:17:45

AI 硬件定制：开启智能新时代的钥匙

AI 硬件定制：开启智能新时代的钥匙 在科技飞速发展的当下，人工智能（AI）已不再是遥不可及的概念，它正以惊人的速度融入我们生活的方方面面。从智能手机中的语音助手，到工厂里的自动化生产线，AI 的身影无处不在。而在这股 AI 浪潮中，AI 硬件定制正逐渐崭露头角，成为推动…...

编程日记 2025/12/28 10:08:06

SpringBoot中配置文件的加载顺序

下面的优先级由高到低 命令行参数java系统属性java系统环境变量外部config文件夹的application-{profile}.ym文件外部的application-{profile}.ym文件内部config文件夹的application-{profile}.ym文件内部的application-{profile}.ym文件外部config文件夹的application.ym文件外…...

编程日记 2025/12/31 7:12:35

hooker frida版just_trust_me.js 2025升级 支持boringssl unpinning

曾几何时&#xff0c;我翻版了 Xposed 的 just_trust_me.apk&#xff0c; just_trust_me.js 脚本仿佛是一张通行证&#xff0c;让我们在 SSL Pinning 的高墙前轻松穿越。 但时代变了。BoringSSL、Cronet、静态 inline hook、动态 verify callback……一切都变得更加隐蔽和棘手…...

编程日记 2025/12/28 9:31:41

React Article模块

实现基础文章发布 安装富文本编辑器 使用useEffect钩子函数获取到channelList,对channelList函数进行一个遍历 渲染到option 实现表单校验 1给Form组件绑定onFinish()函数 拼接表单数据 上传封面 onChange函数获得的参数...

编程日记 2025/12/28 19:24:10

机器学习第二篇 多变量线性回归

数据集&#xff1a;世界幸福指数数据集中的变量有幸福指数排名、国家/地区、幸福指数得分、人均国内生产总值、健康预期寿命、自由权、社会支持、慷慨程度、清廉指数。我们选择GDP per Capita和Freedom&#xff0c;来预测幸福指数得分。 文件一&#xff1a;linear&#xff0c;…...

编程日记 2025/12/29 3:33:37