在第二个 flex div 内右对齐控件

Question

我正在尝试创建一个由两组按钮组成的弹性框布局，第二组按钮右对齐。我试图用 flex-box 布局来做到这一点

flx{display:-webkit-flex}
.flx:first-child{-webkit-flex:1;background-color:silver;}
.flx:nth-child(2){-webkit-flex:4;background-color:yellow;text-align:right}

如 this fiddle 所示，但它没有给出预期的结果。我怀疑我对 flex 应该如何工作的理解还有待改进。如果有人能帮助我走上正轨，我将不胜感激，

Answer 1

弹性布局很好。导致问题的是 CSS 选择器。 .flx:first-child 的目标是具有 class="flx" 的元素的第一个子元素，而不是我怀疑您想要的是具有 class="flx".

的元素的第一个后代子元素

更新到 .flx div:first-child 和 .flx div:nth-child(2)，它们使用 CSS descendent combinator 将样式应用于 class="flx" 容器的子元素。请参见下面的示例：

.flx {
  display: -webkit-flex
}
.flx div:first-child {
  -webkit-flex: 1;
  background-color: silver;
}
.flx div:nth-child(2) {
  -webkit-flex: 4;
  background-color: yellow;
  text-align: right
}

<div class='flx'>
  <div>
    <button>One</button>
    <button>Two</button>
  </div>
  <div>
    <button>Three</button>
    <button>Four</button>
  </div>
</div>

在第二个 flex div 内右对齐控件

Right align controls inside second flex div

css

flexbox