右对齐第二个flex div里面的控件

Question

我正在尝试创建一个弹出框布局，它由两组按钮组成，右对齐第二组。我试图如图this fiddle与柔性盒布局

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} 

要做到这一点，但它没有给出期望的结果。我怀疑我对挠曲应该如何工作的理解留下了一些不足之处。我非常感谢任何能够让我走上正轨的人，

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>