如何certificate单个Flexbox项目（覆盖justify-content）
您可以使用align-self来替代Flex项目的align-self项目。 我正在寻找一种方法来为flex项目覆盖justify-content 。
如果您有一个带有justify-content:flex-end的flexbox容器，但是您希望第一个项目是justify-content: flex-start ，那怎么办？
这是最好的回答这个职位： https : //stackoverflow.com/a/33856609/269396
似乎没有justify-self ，但你可以实现类似的结果设置适当的margin auto ¹。 例如， 对于flex-direction: row （默认），您应该设置margin-right: auto以将孩子alignment到左侧。
.container { height: 100px; border: solid 10px skyblue; display: flex; justify-content: flex-end; } .block { width: 50px; background: tomato; } .justify-start { margin-right: auto; }
<div class="container"> <div class="block justify-start"></div> <div class="block"></div> </div>
AFAIK没有在规范中的属性，但这里是我一直在使用的一个技巧：设置容器元素（与display:flex ） justify-content:space-around然后在第一个和第二个项目，并将其设置为flex-grow:10 （或与您的设置一起使用的其他值）
编辑：如果项目紧紧alignment，这是一个好主意，添加flex-shrink: 10; 到额外的元素，所以布局将在较小的设备上正确响应。
如果实际上并不限制将所有这些元素保留为兄弟节点，则可以将其放在另一个默认popup框中，并使两者的容器都使用空格。
.space-between { border: 1px solid red; display: flex; justify-content: space-between; } .default-flex { border: 1px solid blue; display: flex; } .child { width: 100px; height: 100px; border: 1px solid; }
<div class="space-between"> <div class="child">1</div> <div class="default-flex"> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> </div> </div>
对于那些你想要flex-end的项目宽度已知的情况，你可以设置他们的flex为“0 0 ## px”，并设置你想flex-start为flex:1
这将导致伪flex-start项目填充容器，只是格式化为text-align:left或其他。
我通过将内部项目的样式设置为margin: 0 auto来解决类似的情况margin: 0 auto 。
情况：我的菜单通常包含三个button，在这种情况下，他们需要justify-content: space-between 。 但是当只有一个button时，它现在将被中心alignment而不是在左边。
