Question

.container {
  width: 400px;
  border: 2px solid red;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.item {
  padding: 20px;
  border: 1px solid blue;
  margin: 10px;
  width: 70px;
}

<div class="container">
  <div class=item>Box 1</div>
  <div class=item>Box 2</div>
  <div class=item>Box 3</div>
  <div class=item>Box 4</div>
  <div class=item>Box 5</div>
</div>

我的问题是，如何将Box 5旁边的Box 4移动到Box 5旁边而又没有空格？目前，Box 4移到了右端，public则留在了左边。

Answer 1

有很多方法可以实现这一目标。只需从样式中删除justify-content属性即可。会没事的。

您还可以包装box 4和box 5，并提供根容器（在本例中为item-special-container）display: flex。

.container {
width:400px;
border:2px solid red;
display:flex;
flex-flow:row wrap;
justify-content:space-between;
}

.item {
padding:20px;
border:1px solid blue;
margin:10px;
width:70px;
}
.item-special-container {
  display: flex;
}

<div class="container">
  <div class=item>Box 1</div>
  <div class=item>Box 2</div>
  <div class=item>Box 3</div>
  <div class="item-special-container">
    <div class=item>Box 4</div>
    <div class=item>Box 5</div>
  <div>
</div>

Answer 2

在这种特定的布局中，如果3n + 2子项.item也是last-child子项，则会出现问题：为此元素调整右页边距

.container {
  width: 400px;
  border: 2px solid red;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.item {
  padding: 20px;
  border: 1px solid blue;
  margin: 10px;
  width: 70px;
}

.container :last-child:nth-child(3n + 2) {
   margin-right: auto;
}

<div class="container">
  <div class=item>Box 1</div>
  <div class=item>Box 2</div>
  <div class=item>Box 3</div>
  <div class=item>Box 4</div>
  <div class=item>Box 5</div>
</div>

如何使用在

2 个答案: