卡在 flex-end 和 space-between 和边距之间

Question

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

下面的示例代码不好，因为当我使用时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

据我所知，使用 aflexbox来实现所需的输出可以通过使用以下命令来操作 sflex-basis和margins来实现flexitem：

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

1. 样式中的flex-basisof将宽度分为四份，还调整边距。calc(25% - 40px)flex

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

3. flex-end完成它。

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

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

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

编辑：

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

1. flex-basis通过减少更多来更改10px以调整以删除行左右两端各 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;
   }
   

请给我您对此的反馈。谢谢！

<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: 0 1 calc(25% - 30px);