html - 证明 : space-between with right aligned last element

Question

有没有办法实现这个(使用 flexbox 或其他)？

• 均匀分布的文本
• 但是第一个和最后一个元素粘在边上

我假设这需要对 flex 元素进行收缩包装，这(我认为)是不可能的。

Answer 1

space-between 将起作用 - 查看下面的示例:

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
.wrapper {
  display: flex;
  justify-content: space-between;
}
.wrapper > * {
  border: 1px solid;
}

<div class="wrapper">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
  <div>five</div>
</div>

另一种方法是在末尾为元素使用 auto 边距 - 但它有不同的效果 - 请参见下面的演示:

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
.wrapper {
  display: flex;
  justify-content: space-around;
}
.wrapper > * {
  border: 1px solid;
}
.wrapper div:first-child {
  margin-right: auto;
}
.wrapper div:last-child {
  margin-left: auto;
}

<div class="wrapper">
  <div>one</div>
  <div>two</div>
  <div>three</div>
  <div>four</div>
  <div>five</div>
</div>