如何证明单个flexbox项的正当性（覆盖正当性内容）

283

您可以覆盖align-items有align-self一个弯曲的项目。我正在寻找一种方法来替代justify-content弹性项目。

如果您有一个带有的flexbox容器justify-content:flex-end，但是您希望第一个项目为justify-content: flex-start，那该怎么办呢？

最好的答案是这个帖子：https : //stackoverflow.com/a/33856609/269396

css flexbox

— 马克斯
source

2

使用auto边距。参见此处的框26：stackoverflow.com/a/33856609/3597276

— Michael Benjamin

感谢您链接到最有帮助的答案！

— Brady Dowling

547

似乎没有要justify-self，但你可以达到同样的效果的设置适当margin，以auto¹。例如对于flex-direction: row（默认），您应该设置margin-right: auto为将孩子向左对齐。

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

展开摘要

¹此行为由Flexbox规范定义。

— 帕夫洛
source

51

此技术非常出色，并且也可以在垂直方向上使用。例如，您希望将固定高度容器中的最后一个元素粘贴到底部。您可以使用```.container {flex-direction：column; justify-content：flex-start} .last-item {margin-top：auto}```

— Christian Schlensker

6

@krulik此行为由Flexbox规范定义，请参阅w3.org/TR/2012/CR-css3-flexbox-20120918/#auto-margins

— Pavlo

6

经过更多调查后，justify-self可能与它无关，flexbox而是被使用了，css grids但我不确定。我似乎无法通过Flexbox在Chrome中使用它。

— 杰克·威尔逊

8

如果我希望其中一个位于左侧，而另一个位于中央，该怎么办？

— 米

3

“取自flexbox布局，此属性将被忽略”-取自justify-self的mozilla文档

— Finlay Percy，

19

AFAIK在规范中没有针对该属性的属性，但是这是我一直在使用的一个技巧：将容器元素（带有的容器元素display:flex）设置为，justify-content:space-around 然后在第一项和第二项之间添加一个额外的元素并将其设置为flex-grow:10（或一些与您的设置配合使用的其他值）

编辑：如果项目紧密对齐，则最好也添加flex-shrink: 10;到额外元素，因此布局将在较小的设备上正确响应。

— 埃格巴拉兹
source

1

它确实可以在不指定宽度的情况下工作（至少在我的情况下如此）

— eeglbalazs 2015年

试试min-width: 0

— Dembinski

13

如果您实际上并不局限于将所有这些元素都保留为兄弟节点，则可以将这些元素包装在另一个默认的flex框中，并使两者的容器之间都使用空格。

.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-start和flex-end反向进行相同的操作，则只需交换default-flex容器和独生子的顺序即可。

— 博克斯
source

5

好像justify-self即将要进入浏览器。在MDN上已经有一篇文章。在撰写本文时，浏览器支持不佳。

关于边距解决方案：我有一个带间隙的Flexbox网格。flex-gapFlexbox 没有属性（尚未？）。因此，对于装订线，我正在使用填充和边距，因此margin: auto需要覆盖其他边距...

— 弗兰克·拉默
source

7

可悲的是In flexbox layouts, this property is ignored

— Sphinxxx

1

@Sphinxxx是的，但是可以在容器justify-self 中工作display: grid。最近，它就像flexbox一样，因此可以实现，等丰富的定位align-items，align-self以及一些其他功能，例如我们在这里需要的功能justify-self。我建议在足够的地方使用flexbox，但是如果缺少的话，grid最有可能满足您的需求。（例如，将一个子项轻松对齐到center-x和y中心，将另一子项轻松对齐到right-x中心y － flexbox margin-left: auto可以轻松地将left / right 对齐，而不能将center-right对齐）示例：stackoverflow.com/a/57128453 / 2441655

— Venryx

1

对于您做的项目宽度要将这些情况flex-end是已知的，你可以自己挠设置为“0 0 ## PX”，并设置你想要的项目flex-start与flex:1

这将导致伪flex-start项目填充容器，将其格式化为text-align:left或其他格式。

— 马克斯
source

0

通过将内部项目的样式设置为，我解决了类似的情况margin: 0 auto。
情况：我的菜单通常包含三个按钮，在这种情况下，必须为justify-content: space-between。但是，当只有一个按钮时，它现在将居中对齐而不是向左对齐。

— 微米
source