Question

这是一个我已经有解决方案的问题，但我想知道是否有更好的方法。我想要的是使用flexbox来使项目行之间有均匀的空间和行之间的行。下面的代码段中的第一个和第二个示例通过使用:after实现此目的，但我必须使用相当数量的CSS将其隐藏在最后一行。

.item:nth-child(4n + 1):nth-last-child(4):after,
.item:nth-child(4n + 1):nth-last-child(4):after,
.item:nth-child(4n + 1):nth-last-child(2):after,
.item:nth-child(4n + 1):nth-last-child(1):after{
  display: none;  
}

当然有更好的方法（使用flexbox）有人知道吗？

我尝试在每个项目上使用边框，但显然它们之间有空格不起作用，然后我仍然需要使用:nth-last-child隐藏它。

.outer{
  background-color: #ccc;
  margin-bottom: 15px;
}

.wrap{
  overflow: hidden;
  flex: 4;
  justify-content: space-between;
  flex-flow: row wrap;
  width: 80%;
  margin: 0 auto;
  background-color: #cdcdcd;
  display: flex;
}

.item{
  width: 23%;
  padding-bottom: 30px;
  margin-bottom: 30px;
  position: relative;
}
.item2{
  width: 23%;
  padding-bottom: 30px;
  margin-bottom: 30px;
  position: relative;
  border-bottom: 1px solid red;
}
.item:nth-child(4n + 1):after{
  content: "";
  position: absolute;
  left: 0;
  width: 500%;
  bottom: 0;
  border-bottom: 1px solid red;
}
@media (max-width: 768px) {
  .item:nth-child(2n + 1):nth-last-child(2):after,
  .item:nth-child(2n + 1):nth-last-child(1):after{
    display: none;  
  }
  .item{
    width: 43%;
  }
}
@media (min-width: 768px) {
  .item:nth-child(4n + 1):nth-last-child(4):after,
  .item:nth-child(4n + 1):nth-last-child(4):after,
  .item:nth-child(4n + 1):nth-last-child(2):after,
  .item:nth-child(4n + 1):nth-last-child(1):after{
    display: none;  
  }
}

<div class="outer">
  <h3>Working example - 8 Items</h3>
  <div class="wrap">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
      <div class="item">Item 7</div>
      <div class="item">Item 8</div>
  </div>
</div>
<div class="outer">
  <h3>Working example - 5 Items</h3>
  <div class="wrap">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
  </div>
</div>
<div class="outer">
  <h3>Using normal border</h3>
  <div class="wrap">
      <div class="item2">Item 1</div>
      <div class="item2">Item 2</div>
      <div class="item2">Item 3</div>
      <div class="item2">Item 4</div>
      <div class="item2">Item 5</div>
  </div>
</div>

Answer 1

我想到了另一种方式。这是一个响应式解决方案。我认为这是最好的方式...... 要查看4列，您需要单击整页按钮

＆＃13;

.outer{
  background-color: #ccc;
  margin-bottom: 15px;
}

.wrap{
  overflow: hidden;
  flex: 4;
  justify-content: space-between;
  flex-flow: row wrap;
  width: 80%;
  margin: 0 auto;
  background-color: #cdcdcd;
  display: flex;
}
.full{
  width: 100%;
  background-color: red;
  margin-bottom: 30px;
  height: 1px;
  display: none;
}
@media (max-width: 768px) {
  .visible-small{
    display: block;
  }
}
@media (min-width: 768px) {
  .visible-large{
    display: block;
  }
}
.item{
  width: 23%;
  margin-bottom: 30px;
  position: relative;
}

＆＃13;

<div class="outer">
  <h3>Using extra div</h3>
  <div class="wrap">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="full visible-small"></div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="full visible-large visible-small"></div>
      <div class="item">Item 5</div>
  </div>
</div>
<div class="outer">
  <h3>Using extra div</h3>
  <div class="wrap">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="full visible-small"></div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="full visible-large visible-small"></div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
      <div class="full visible-small"></div>
      <div class="item">Item 7</div>
      <div class="item">Item 8</div>
      <div class="full visible-large visible-small"></div>
      <div class="item">Item 9</div>
  </div>
</div>

＆＃13;

Answer 2

您可以使用:before并避开display:none规则：

.outer{
  background-color: #ccc;
  margin-bottom: 15px;
}

.wrap{
  overflow: hidden;/* will hide first row of item:before */
  /* flex: 4; i do not see the use here */
  justify-content: space-between;
  flex-flow: row wrap;
  width: 80%;
  margin: 0 auto;
  background-color: #cdcdcd;
  display: flex;
}

.item{
  width: 23%;
  padding-bottom: 30px;
  margin-bottom: 30px;
  position: relative;
}
.item2{/* just to do it different , don ' t mind that part */
  width: 23%;
  padding : 30px 0;
  margin-bottom: -10px;
  position: relative;
  border-bottom: 1px solid red;
}
.item:nth-child(4n + 1):before{
  content: "";
  position: absolute;
  left: 0;
  width: 500%;
  top: -30px;
  border-bottom: 1px solid red;
}

<div class="outer">
  <h3>Working example - 8 Items</h3>
  <div class="wrap">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
      <div class="item">Item 7</div>
      <div class="item">Item 8</div>
  </div>
</div>
<div class="outer">
  <h3>Working example - 5 Items</h3>
  <div class="wrap">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
  </div>
</div>
<div class="outer">
  <h3>Using normal border</h3>
  <div class="wrap">
      <div class="item2">Item 1</div>
      <div class="item2">Item 2</div>
      <div class="item2">Item 3</div>
      <div class="item2">Item 4</div>
      <div class="item2">Item 5</div>
  </div>
</div>

修改

您还可以设置断点并使用每个项目绘制线

.outer{ background-color: #ccc; margin-bottom: 15px; } .wrap{ overflow: hidden;/* will hide first row of item:before */ /* flex: 4; i do not see the use here */ justify-content: space-between; flex-flow: row wrap; width: 80%; margin: 0 auto; background-color: #cdcdcd; display: flex; } .item{ width: 23%; margin: 29px 1% 31px; position: relative; } .item2{/* just to do it different , don ' t mind that part */ width: 23%; padding : 30px 0; margin-bottom: -10px; position: relative; border-bottom: 1px solid red; } .item:before{ content: ""; position: absolute; left: -20%; width: 800%; top: -30px; border-bottom: 1px solid red; } .brkpt .item { min-width:60px; max-width:100px; background:gray }

<div class="outer"> <h3>Working example - 8 Items</h3> <div class="wrap"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> <div class="item">Item 7</div> <div class="item">Item 8</div> </div> </div> <h3>Working example - 16 Items breaking points every 120px average</h3> <div class="wrap brkpt"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> <div class="item">Item 7</div> <div class="item">Item 8</div> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> <div class="item">Item 7</div> <div class="item">Item 8</div> </div> </div> <div class="outer"> <h3>Working example - 5 Items</h3> <div class="wrap"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> <div class="item">Item 5</div> </div> </div> <div class="outer"> <h3>Using normal border</h3> <div class="wrap"> <div class="item2">Item 1</div> <div class="item2">Item 2</div> <div class="item2">Item 3</div> <div class="item2">Item 4</div> <div class="item2">Item 5</div> </div> </div>

Answer 3

正如我在小型设备中所说，这种方法会遇到严重问题。我建议你使用这张图片：

作为总菜单（<div class="wrap"）的bcackground图像，当然还有一些与菜单项高度相关的更改。

.wrap{
   background-image: url(IMAGE-URL);
   background-repeat: repeat;
 }

Flexbox与行之间的行之间的空间

3 个答案: