时间:2021-05-08
inline-flex 和 inline-block 一样,对内部元素来说是个 display:flex 的容器,对外部元素来说是个 inline 的块。
两者的区别描述:
一句话来描述就是 当Flex Box 容器没有设置宽度大小限制时,当display 指定为 flex 时,FlexBox 的宽度会填充父容器,当display指定为 inline-flex 时,FlexBox的宽度会包裹子Item,如下图所示:
对应的代码如下所示:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .flex__container { display: inline-flex; background-color: gray; } .flex__item { width: 50px; height: 50px; background-color: aqua; border: 1px solid black; } </style></head><body><!--Flex容器--><div class="flex__container"> <!--Flex容器中的子Item--> <div class="flex__item"></div> <div class="flex__item"></div> <div class="flex__item"></div> <div class="flex__item"></div></div></body></html>到此这篇关于CSS中flex和inline-flex的区别详解的文章就介绍到这了,更多相关CSS flex和inline-flex内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
flexcontainer(flex容器或弹性容器)flex容器是flex元素的的父元素。通过设置display属性的值为flex或inline-flex定义。
CSS中的Flex(弹性布局)可以很灵活的控制网页的布局,其中决定Flex布局内项目宽度/高度的是三个属性:flex-basis,flex-grow,flex-
在CSS3Flexbox中flex-shrink属性定义为:Thiscomponentsets‘flex-shrink’longhand
html代码:css实现矩形边角加粗 css代码:body{display:flex;justify-content:center;flex-direct
flex基本概念flex布局(flex是flexiblebox的缩写),也称为弹性盒模型。将属性和属性值(display:flex;)写在哪个标签样式中,谁就是