卡在 flex-end 和 space-between 和 margin 之间

Question

在 flexbox 中，当我使用 justify-content:space-between 时，第一个和最后一个项目与 flex 容器的边界完全对齐，其中 space 在它们之间划分。我怎样才能将第一个项目右对齐，而其他项目也右对齐（而不是整个宽度）？

下面的示例代码不好，因为当我使用 flex-end、我必须为项目设置边距，所以每行的第一个 不粘右边.

#flexcontainer{
  display: -webkit-flex;
  display: flex;
  flex-wrap:wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  background:#ff8800;
}


.flexitem{
 display: -webkit-flex;
 display: flex;
 margin:20px;
 width:24%;
 background:#666666;
 box-sizing:border-box;
    height:50px;

}

<div id="flexcontainer">
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
</div>

这也不好，因为项目没有右对齐（但整个宽度）：

#flexcontainer{
  display: -webkit-flex;
  display: flex;
  flex-wrap:wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  background:#ff8800;

}


.flexitem{
 display: -webkit-flex;
 display: flex;
 margin:0;
 width:24%;
 background:#888888;
 box-sizing:border-box;
    height:50px;
}

<div id="flexcontainer">
    <div class="flexitem"></div>
    <div class="flexitem"></div>
    <div class="flexitem"></div>
  </div>

我想要的图像输出（第一个贴在右边没有边距右边，如果存在 4 个元素，第 4 个贴在左边，如果超过 4 个元素，则其他贴在右边）：

Answer 1

我想您可以简单地删除第一个示例中的右边距，这是您想要的样子吗？

#flexcontainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-end;
  background: #ff8800;
}


.flexitem {
  margin: 20px;
  margin-right: 0;
  width: 24%;
  background: #666666;
  box-sizing: border-box;
  height: 50px;
}

<div id="flexcontainer">
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
</div>

Answer 2

AFAIK 使用 flexbox 可以实现的最佳结果可以使用以下方法操作 flexitem 的 flex-basis 和 margin 来实现您想要的输出：

  margin: 20px;
  display: flex;
  flex: 0 1 calc(25% - 40px);

flex样式中calc(25% - 40px)的flex-basis将宽度分成四等份调整边距。
注意我已将 flex-grow 设置为禁用。
flex-end搞定了

让我知道您的反馈。谢谢！

#flexcontainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-end;
  background: #ff8800;
}
.flexitem {
  margin: 20px;
  display: flex;
  flex: 0 1 calc(25% - 40px);
  background: #666666;
  box-sizing: border-box;
  height: 50px;
}

<div id="flexcontainer">
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
</div>

编辑:

所以我对保证金计算做了一些调整：

通过减少 10px 来更改 flex-basis 以调整删除行左右两端的 20px：
```
flex: 0 1 calc(25% - 30px);
```

最右边/最左边的盒子位于右边/左边：

.flexitem:nth-child(4n) {
  margin-right: 0;
}
.flexitem:nth-child(4n + 1) {
  margin-left: 0;
}
.flexitem:last-child {
  margin-right: 0;
}

给我你的反馈。谢谢！

#flexcontainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-end;
  background: #ff8800;
}
.flexitem {
  margin: 20px;
  display: flex;
  flex: 0 1 calc(25% - 30px);
  background: #666666;
  box-sizing: border-box;
  height: 50px;
}
.flexitem:nth-child(4n) {
  margin-right: 0;
}
.flexitem:nth-child(4n + 1) {
  margin-left: 0;
}
.flexitem:last-child {
  margin-right: 0;
}

<div id="flexcontainer">
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
  <div class="flexitem"></div>
</div>

卡在 flex-end 和 space-between 和 margin 之间

Stuck between flex-end and space-between and margin

html

css

flexbox

css-calc