【css】多个子项目中间间隔固定排列

最新推荐文章于 2023-07-08 10:46:36 发布

芳月存心

最新推荐文章于 2023-07-08 10:46:36 发布

阅读量1.2k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/z767327552/article/details/82910004

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  width:640px;
  flex-wrap:wrap;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  flex-shrink:0;
  flex-grow:1;
}
.flex-container > div:first-child {
   margin-left: 0;
} 
.flex-container > div:nth-child(5n+1){
   margin-left: 0;
}
.flex-container > div:nth-child(5n){
   margin-right: 0;  
}

</style>
</head>
<body>
<h1>The flex-grow Property</h1>

<p>Make the third flex item grow eight times faster than the other flex items:</p>

<div class="flex-container">
  <div >1</div>
  <div >2</div>
  <div >3</div>
  <div >4</div>
  <div >5</div>
  <div >6</div>
  <div >7</div>
  <div >8</div>
  <div >9</div>
  <div >10</div>
  <div >11</div>
  <div style="background:transparent">12</div>
  <div style="background:transparent">13</div>
  <div style="background:transparent">14</div>
  <div style="background:transparent">15</div>
</div>

</body>
</html>