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

Question

在弹性盒子中，当我使用justify-content:space-between 时，第一个和最后一个项目与弹性容器的边界完全对齐，它们之间的空间被划分。如何将第一个项目向右对齐，而其他项目也向右对齐（而不是整个宽度）？

下面的示例代码不好，因为当我使用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 个，则其他对齐到右侧）：

Answer 1

AFAIK 使用 flexbox 可以达到您想要的输出的最佳效果可以通过使用 flexitems 的 flex-basis 和 margin 来完成：

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

1. flex 样式中的calc(25% - 40px) 的flex-basis 将宽度分成四个调整边距。

2. 注意，我已将 flex-grow 设置为禁用。

3. 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>

编辑：

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

1. 通过减少10px更多来更改flex-basis，以调整删除一行左右两端的20px：

   flex: 0 1 calc(25% - 30px);
   

2. 让最右边/最左边的盒子位于右/左边缘：

   .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>

Answer 2

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

#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>