在flex-end和space-between与margin之间徘徊

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个）：

Answer 1

AFAIK使用flexbox实现所需输出的最佳效果可以通过以下方式操纵flex-basis和margin：

flexitem

1. margin: 20px; display: flex; flex: 0 1 calc(25% - 40px); 样式中的flex-basis calc(25% - 40px)将宽度分为四个，也会调整边距。

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

3. flex-grow完成了它。

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

＆＃13;
＆＃13;
flex-end
＆＃13;
#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;
}
＆＃13;
＆＃13;
＆＃13;

修改：

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

1. 通过减少<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-basis以调整以便在行的左右两端删除每个20px：

   10px

2. 最右边/最左边的框位于右/左边缘：

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

给我你的反馈意见。谢谢！

＆＃13;
＆＃13;
.flexitem:nth-child(4n) {
  margin-right: 0;
}
.flexitem:nth-child(4n + 1) {
  margin-left: 0;
}
.flexitem:last-child {
  margin-right: 0;
}
＆＃13;
#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;
}
＆＃13;
＆＃13;
＆＃13;

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>