Flex 布局 display:flex 与 inline-flex 区别

1.Flex布局  display:flex

.bigbox{
width: 500px;
height: 400px;
background:#ff0000;
display: flex;
}
.smallbox{
width: 100px;
height: 100px;
background: #f5f5f5;
margin: 10px;
}

 

<span>flex</span>

<div class="bigbox">
<div class="smallbox">1</div>
<div class="smallbox">2</div>
<div class="smallbox">3</div>
</div>

 

二。Flex布局 display:inline-flex

<span>inline-flex</span>
<div class="bigbox">
<div class="smallbox">1</div>
<div class="smallbox">2</div>
<div class="smallbox">3</div>
</div>

具体用法

.bigbox{
display: -webkit-inline-flex;
display:inline-flex; /*行内 flex 布局*/
}
.bigbox{
display:-webkit-flex;
display:flex; /*Webkit 内核的浏览器，必须加上-webkit前缀*/
}

文章来自 www.96net.com.cn