6

在 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

2 回答 2

2

AFAIK 可以使用 aflexbox来实现所需的输出，可以通过以下方式操作sflex-basis和s 来实现最佳效果：marginflexitem

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

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

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

于 2016-09-07T15:01:51.067 回答
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>

于 2016-09-06T10:48:16.117 回答