证明：空间与右对齐的最后一个元素

Question

有没有一种方法可以实现这一点（使用flexbox或其他）？

• 均匀分布的文本
• 但第一和最后一个元素棍棒双方

我假定这将需要弯曲物品被shrinkwrapped的，这（我认为）是不可能的。

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>

A反璞归真的方法是使用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>

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/）