display:flex 和 display:inline-flex 区别

最新推荐文章于 2025-05-09 16:42:30 发布
原创 最新推荐文章于 2025-05-09 16:42:30 发布 · 1.6k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5 #css #html

本文深入探讨了CSS中的Flex布局，重点解释了`display:flex`和`display:inline-flex`的差异。`display:flex`保持了容器的块级特性，但其子元素表现为行内块元素。而`display:inline-flex`则让容器变为行内块元素，同时其子元素也具有行内块特性和Flex布局的换行能力。理解这两个属性对于优化网页布局至关重要。

简单的说就是：

display:flex;不会让容器本身取消它的块装的属性，但它的子元素会变成行内块的的属性 。 

display:inline-flex;父级是变成行内块元素，他的子元素也是行内块元素，并且自动换行。

display: flex和display: inline-flex区别
风情
08-26 1304
play: flex和都是CSS中的属性，用于创建Flexbox容器，但它们在布局表现上有一些关键区别。
深入解析CSS中display: flex与inline-flex属性
最新发布
07-21
在CSS中，display: flex 和 display: inline-flex 是两种非常实用的布局属性。本文通过两个具体的代码示例，详细展示了这两种属性的使用效果。display: flex 用于创建弹性盒子模型，能够灵活地对容器内的子元素进行...
display：inline-flex和display：flex有什么区别？
CHCH998的博客
08-13 1234
I am trying to vertically align elements within an ID wrapper. 我正在尝试在ID包装器中垂直对齐元素。 I gave the prope
display：flex和display: inline-flex区别
FE攻城狮
05-06 8113
flex： 将对象作为弹性伸缩盒显示 inline-flex：将对象作为内联块级弹性伸缩盒显示 flex .main{ background-color: #0f0; display: flex;/*父div设置该属性*/ } .main>div{ width: 50px; height: 5...
display：flex和display: inline-flex的使用效果区别
滴水石穿
11-03 6642
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta...
详解CSS中的display:flex||inline-flex属性
09-27
主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。
overflow: hidden;display: flex;display: inline-flex;display: inline-block;position: absolute;position: fixed;
05-31
- display: inline-flex：与flex相似，但是它是在行内而不是块内。 - display: inline-block：行内块元素，与默认的行内元素相似，但可以设置宽度和高度。 - position: absolute：基于最近的非 static 定位祖先元素...
CSS中display为flex和inline-flex的区别
侯阮悦的博客
06-20 5342
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 Flex 布局。 display: flex 将对象作为弹性伸缩盒显示 display: inline-flex 将对象作为内联块级弹性伸缩盒显示 flex 效果： 没有为父元素设置宽度，所以父元素的宽度为100%，而高度则是由子元素撑开，既高...
html5中display flex,详解CSS中的display:flex||inline-flex属性
weixin_35691102的博客
06-16 1371
这篇文章主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。介绍Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。fl...
display: inline-flex的妙用以及和display: flex 的区别是什么？
浮生的博客
09-17 8670
有时候我们使用了display: flex属性后，子元素横向排列，你可能会发现如下图现象： 父级元素不设置宽度，背景宽度默认100%，如果这时想让父级元素随着子元素宽度自适应，怎么处理？ 接下来，上代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .wrap { display: flex;
display: flex 和 display: inline-flex区别与使用
qq_41910413的博客
03-05 1486
display: inline-flex;
弹性盒子display：flex
你还有我
12-21 3788
目录弹性盒子flex-direction 排列方向flex-wrap规定是否换行justify-content主轴排列align-items侧轴排列方式单个元素的align-selfflex-grow放flex-shrink缩flex-basisorder 弹性盒子 声明定义： 使用display：flex或display：inline-flex 声明一个容器为弹性盒子。这个容器中的子元素们，会遵循弹性布局。 【注】一般是使用display:flex. inline-flex极少用。 flex:如果没有为父
css display:flex 属性
weixin_44981396的博客
11-22 364
一：display:flex 布局是什么 display:flex 是一种布局方式它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-...
弹性布局flex
tpf1220的关于前端的技术的比较浅显的健谈
03-29 820
布局的传统解决方案，都是基于盒状模型。它依靠display,poristion,float来实现。对于有一些布局想实现就特别不方便，如：垂直居中Flex,即flaxible box,弹性布局的意思，用来为盒状模型提供最大的灵活性。 任何一个容器都可以执行为Flex布局，只需要改变容器的display属性为flex. 行内元素也可以实现弹性布局，将display属性改为inline-flex即可。
设置主轴方向和弹性盒子换行~~~~
weixin_57320268的博客
02-14 3730
1. 主轴默认是水平方向, 侧轴默认是垂直方向 修改主轴方向属性: flex-direction 属性值 作用 row 行, 水平(默认值) column *列, 垂直 row-reverse 行, 从右向左 column-reverse 列, 从下向上 flex-direction：column; 修改完毕，主轴是Y轴， 侧轴是X轴。 2.弹性盒子换行 特性： 给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，
flex 还是 inline-flex？实际开发中应该怎么选？
weixin_52648900的博客
05-09 1654
display:flex 与 display:inline-flex 在弹性布局本质上是相同的，它们的差异仅在于容器自身在文档流中的展示方式。
CSS的display的多种布局方式总结(inline-block,table,flex)
Yueqin0512的博客
11-03 9772
1.display:inline-block布局 常见块级元素 常见行内元素 一：display的几个常用的属性值 inline（行内元素） 1.使元素变成行内元素，可以与其他行内元素共享一行，不会独占一行 2.不能更改元素的height，width的值，大小由内容撑开 3.可以使用padding,margin上下左右都有效 block（块级元素） 1.使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度 2.能够改变元素的height，width的值 3.可以设
display: inline-flex和display：flex区别
07-23
display: inline-flex和display: flex是CSS中两种不同的布局属性。 display: flex用于创建一个flex容器，其中的子元素会按照一定的规则进行布局。flex容器可以是块级元素或行内元素，取决于父元素的属性。子元素默认会沿着主轴排列，可以通过flex-direction属性来改变排列方向。子元素的大小可以通过flex属性来调整。flex容器具有弹性盒子模型的特性，可以实现灵活的布局。 display: inline-flex与display: flex类似，也是用于创建一个flex容器，但是它会将容器设置为行内元素。这意味着容器将根据内容自动调整宽度，并且可以与其他行内元素在一行显示。这对于需要在文本流中插入灵活布局的元素非常有用。 总结起来，display: flex创建的是一个块级元素的flex容器，而display: inline-flex创建的是一个行内元素的flex容器。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

时光机上敲代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值