display：flex和display: inline-flex的使用效果区别

最新推荐文章于 2025-03-06 10:07:30 发布

IT 老王

最新推荐文章于 2025-03-06 10:07:30 发布

阅读量6.5k

点赞数 6

分类专栏： html

本文链接：https://blog.csdn.net/wkj001/article/details/102881080

版权

html 专栏收录该内容

49 篇文章

订阅专栏

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
.main{
      background-color: #0f0;
      display:flex;/*父div设置该属性此时没有为父元素main设置宽度，默认为100%*/
    }               
    .main>div{
      width: 50px;
      height: 50px;
      border: 1px solid black;
    }
	
.main2{
      background-color: #0f0;
      display:inline-flex/*没有为父元素main2设置宽度，但是父元素默认会根据子元素的宽高去自适应*/
    }               
    .main2>div{
      width: 50px;
      height: 50px;
      border: 1px solid black;
    }
	
</style>
<body>
<div class="main">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <br>
  
  <div class="main2">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>
</html>