Question

justify-self不起作用。为什么？

html

<div class="container">
  <div class="a">

  </div>
  <div class="b">

  </div>
  <div class="b">

  </div>

</div>

css

.container {
  display: flex;
  justify-content: center;
  background: yellow;
}

.container * {
  width: 10px;
  height: 10px;
  background: green;
  border: 2px solid red;
}

.a {
  justify-self: start;
}

jsfiddle

我希望第一个元素向左对齐，因为它具有类a并且类a指定了justify-self: start，但这不会发生。为什么？

正如我在评论中所知，flexbox不支持justify-self属性。那么我如何使用例如网格将两个孩子放在父母中间，而一个孩子粘在父母的左侧呢？

Answer 1

您不需要网格。
Flexbox用于一维布局，而Grid用于二维布局。

您可以通过多种方式执行此操作。 Michael_B在类似的问题center-and-right-align-flexbox-elements

中很好地解释了这一点

自我证明CSS属性无法产生预期的效果

1 个答案: