右對齊第二個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>