html - 卡在 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 个贴在左边，如果超过 4 个元素，则其他贴在右边):

Answer 1

据我所知，使用 flexbox 可以实现的最佳效果可以通过操纵 flex-basis 和 margin 来实现flexitem 使用这个:

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

1. flex样式中calc(25% - 40px)的flex-basis将宽度分成四等分调整为 margin 也。

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>

编辑:

所以我对 margin 计算做了一些调整:

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

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

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