css3 - 第二个flex div内的右对齐控件

我正在尝试创建一个由两组按钮组成的伸缩框布局，第二组按钮对齐。我试图通过弹性盒布局来做到这一点

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应该如何工作的理解尚有待改进。我将非常感谢任何能够将我带入正确轨道的人，

最佳答案

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

更新为使用CSS descendent combinator将样式应用于.flx div:first-child容器的子元素的.flx div:nth-child(2)和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>