对齐：间隔与右对齐的最后一个元素

Question

有没有办法实现这一点（使用flexbox或其他）？

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

我假设这需要将flex项目收缩包装，我认为这是不可能的。

Answer 1

chisq.test将有效 - 请查看以下示例：

＆＃13;

＆＃13;

space-between

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

另一种方法是在最后使用<div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div>页边距 - 但它有不同的效果 - 请参阅下面的演示：

＆＃13;

＆＃13;

auto

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用flexbox，您可以使用 justify-content 属性来定义项目的分发行为。

justify-content: space-around;

是您所需要的。

这是一个例子： http://codepen.io/fazermokeur/pen/WGJpJO

（直接受到关于flexbox的完美资源的启发：https://css-tricks.com/snippets/css/a-guide-to-flexbox/）