如何对齐单个 flexbox 项目(覆盖 justify-content) [英] How to justify a single flexbox item (override justify-content)

问题描述

您可以使用 align-self 覆盖弹性项目的 align-items.我正在寻找一种方法来覆盖弹性项目的 justify-content.

如果你有一个带有 justify-content:flex-end 的 flexbox 容器，但你希望第一项是 justify-content: flex-start，怎么可能能做到吗?

解决方案

好像没有justify-self，但是可以通过设置适当的margin来达到类似的结果> 到 auto¹.例如对于 flex-direction: row (默认)，您应该设置 margin-right: auto 以将子项向左对齐.

.container {高度:100px；边框:纯10px天蓝色；显示:弹性；justify-content: flex-end;}.堵塞 {宽度:50px；背景:番茄；}.justify-开始{右边距:自动；}

<div class="block justify-start"></div><div class="block"></div>

¹ 这种行为是 由 Flexbox 规范定义.

You can override align-items with align-self for a flex item. I am looking for a way to override justify-content for a flex item.

If you had a flexbox container with justify-content:flex-end, but you want the first item to be justify-content: flex-start, how could that be done?

解决方案

There doesn't seem to be justify-self, but you can achieve similar result setting appropriate margin to auto¹. E. g. for flex-direction: row (default) you should set margin-right: auto to align the child to the left.

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

¹ This behaviour is defined by the Flexbox spec.

这篇关于如何对齐单个 flexbox 项目(覆盖 justify-content)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！