广告

display:flex与inline-flex 区别

2019-3-25 14:10| 作者: admin| 查看: 308| 评论: 0|来自: 蚂蚁部落

关于弹性布局的基本用法本文不做介绍,具体参阅display:flex 弹性布局一章节。

弹性布局的设置可以有两种,也就是几天主题中介绍的两种方式:

[CSS] 纯文本查看 复制代码
display:flex;
display:inline-flex;

都可以设置元素的弹性布局效果,但是很少介绍两者的区别,或者有文章介绍,但是并不是太详细。

本文结合代码实例对它们之间的区别进行一下详细介绍,首先看一段简化的代码:

[CSS] 纯文本查看 复制代码
.one{display: flex;}
.two{display: inline-flex;}

有两个div,分别设置两种不同类型的弹性布局,那么对它们有什么影响呢。

总结如下:

(1).对于它们的内部的项目没有任何区别,也就是效果完全一样。

(2).对于容器div自身来说,一个表现为块级元素,一个表现为块级内联元素。

它们唯一的区别就是inline-flex可以将当前元素转换为块级内联元素,flex不进行转换。

对于它们的内部子项目没有任何影响,只是对自身和自身与周边元素的关系产生一些影响。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.main{
  background-color: red;
  display: flex;
}.main>div{
  width: 50px;
  height: 50px;
  border: 1px solid blue;
  box-sizing: border-box
}
</style>
</head>
<body>
  <div class="main">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>
</html>

class属性值为"main"的元素能够在横向上自动填充满它的父元素。

div为表现为为块级元素的特性,代码修改如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
.main{
  background-color: red;
  display: inline-flex;
}.main>div{
  width: 50px;
  height: 50px;
  border: 1px solid blue;
  box-sizing: border-box
}
</style>
</head>
<body>
  <div class="main">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>
</html>

上面代码将display属性值修改为inline-flex。

外层div的宽度是根据内部子元素的宽度自自适应的,也就是外层div表现为内联块级元素的特性。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部