display:flex 和 display:inline-flex 区别

最新推荐文章于 2024-08-01 11:42:02 发布
最新推荐文章于 2024-08-01 11:42:02 发布
阅读量1.5k 收藏 6
点赞数 1
分类专栏： css 文章标签： html5 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web_ding/article/details/120729614
版权
本文深入探讨了CSS中的Flex布局，重点解释了`display:flex`和`display:inline-flex`的差异。`display:flex`保持了容器的块级特性，但其子元素表现为行内块元素。而`display:inline-flex`则让容器变为行内块元素，同时其子元素也具有行内块特性和Flex布局的换行能力。理解这两个属性对于优化网页布局至关重要。
摘要由CSDN通过智能技术生成

简单的说就是：

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

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

时光机上敲代码
关注
专栏目录
display：inline-flex和display：flex有什么区别？
CHCH998的博客
08-13 1060
I am trying to vertically align elements within an ID wrapper. 我正在尝试在ID包装器中垂直对齐元素。 I gave the prope
弹性盒学习笔记(display:flex/inline-flex;)
lwr3379966的博客
03-21 2108
文章目录弹性盒学习笔记(display:flex/inline-flex;)一.flex容器属性（给父级元素添加的属性）1、display:flex、inline-flex2、flex-direction属性 决定主轴的方向（即项目的排列方向）3、flex-wrap属性，定义子元素是否换行显示4、 flex-flow5、 justify-content属性 定义了项目在主轴（）上的对齐方式。6、a...
display：flex和display: inline-flex区别
FE攻城狮
05-06 7998
flex： 将对象作为弹性伸缩盒显示 inline-flex：将对象作为内联块级弹性伸缩盒显示 flex .main{ background-color: #0f0; display: flex;/*父div设置该属性*/ } .main>div{ width: 50px; height: 5...
Css flex 布局
最新发布
qq_54855933的博客
08-01 1160
css的flex布局
display：flex和display: inline-flex的使用效果区别
滴水石穿
11-03 6475
<!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的区别
侯阮悦的博客
06-20 5249
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 Flex 布局。 display: flex 将对象作为弹性伸缩盒显示 display: inline-flex 将对象作为内联块级弹性伸缩盒显示 flex 效果： 没有为父元素设置宽度，所以父元素的宽度为100%，而高度则是由子元素撑开，既高...
详解CSS中的display:flex||inline-flex属性
09-27
主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。
display: inline-flex和display：flex区别
07-23
display: inline-flex和display: flex是CSS中两种不同的布局属性。 display: flex用于创建一个flex容器，其中的子元素会按照一定的规则进行布局。flex容器可以是块级元素或行内元素，取决于父元素的属性。子元素...
display:flex或display:inline-flex有什么区别
01-03
display:flex和display:inline-flex是CSS中用于布局的两个属性，它们的区别在于元素的显示方式和布局行为。 1. display:flex： - display:flex将元素设置为一个弹性容器，该容器中的子元素（flex项）可以通过设置...
html5中display flex,详解CSS中的display:flex||inline-flex属性
weixin_35691102的博客
06-16 1267
这篇文章主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。介绍Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。fl...
display: inline-flex的妙用以及和display: flex 的区别是什么？
浮生的博客
09-17 7056
有时候我们使用了display: flex属性后，子元素横向排列，你可能会发现如下图现象： 父级元素不设置宽度，背景宽度默认100%，如果这时想让父级元素随着子元素宽度自适应，怎么处理？ 接下来，上代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .wrap { display: flex;
display: flex 和 display: inline-flex区别与使用
qq_41910413的博客
03-05 1065
display: inline-flex;
弹性盒子display：flex
你还有我
12-21 3642
目录弹性盒子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 281
一：display:flex 布局是什么 display:flex 是一种布局方式它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-...
弹性布局flex
tpf1220的关于前端的技术的比较浅显的健谈
03-29 692
布局的传统解决方案，都是基于盒状模型。它依靠display,poristion,float来实现。对于有一些布局想实现就特别不方便，如：垂直居中Flex,即flaxible box,弹性布局的意思，用来为盒状模型提供最大的灵活性。 任何一个容器都可以执行为Flex布局，只需要改变容器的display属性为flex. 行内元素也可以实现弹性布局，将display属性改为inline-flex即可。
设置主轴方向和弹性盒子换行~~~~
weixin_57320268的博客
02-14 3539
1. 主轴默认是水平方向, 侧轴默认是垂直方向 修改主轴方向属性: flex-direction 属性值 作用 row 行, 水平(默认值) column *列, 垂直 row-reverse 行, 从右向左 column-reverse 列, 从下向上 flex-direction：column; 修改完毕，主轴是Y轴， 侧轴是X轴。 2.弹性盒子换行 特性： 给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，
flex 布局
chunsha1613的博客
12-02 342
flex，弹性布局，用来为盒模型提供最大的而灵活性，任何一个容器都可以指定为flex布局。 dispaly：flex； 行内元素也可以使用felx布局。display：inlie-flex； webkit内核的浏览器，必须加上-webkit前缀。 .box { display:-web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

时光机上敲代码

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

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

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

打赏作者

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

抵扣说明：

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

余额充值