Flexbox將取決於兒童

Question

的數量有證明內容如下：

<label> 
    <button>Create</button> 
    </label> 

我想在有這個按鈕被靠右對齊這樣

---------------------------- 
|     [create]| 
---------------------------- 

：

<label> 
    <button>Delete</button> 
    <button>Update</button> 
    </label> 

我想讓按鈕處於角落

---------------------------- 
|[delete]   [update]| 
---------------------------- 

不添加額外的類到標籤。

Answer 1

你可以這樣做只是用普通標準Flexbox的屬性：

• flex-direction: row-reverse - 把項目一排，從「底」開始（取決於閱讀方向）
• justify-content: space-between - 把項目儘可能遠離彼此儘可能

label { 
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
    justify-content: space-between; 
 
}

<label> 
 
    <button>Create</button> 
 
</label> 
 

 
<label> 
 
    <button>Delete</button> 
 
    <button>Update</button> 
 
</label>

Answer 2

您只需在last-child上使用margin-left: auto即可獲得理想的結果。

label { 
 
    display: flex; 
 
    border-bottom: 1px solid #aaa; 
 
    margin: 20px 0; 
 
} 
 
label button:last-child { 
 
    margin-left: auto; 
 
}

<label> 
 
    <button>Create</button> 
 
</label> 
 

 
<label> 
 
    <button>Delete</button> 
 
    <button>Update</button> 
 
</label>

Answer 3

您可以使用CSS Flexbox的justify-content屬性來調整你的元素。

看一看這個Codepen。

或者看下面的代碼以供參考，我也用<div>代替<label>，就像.two那樣，它們在兩個按鈕上都起作用。

div { 
 
    display: flex; 
 
    background: #ddd; 
 
    padding: 10px 20px; 
 
    margin-bottom: 10px; 
 
} 
 

 
div:first-child { 
 
    justify-content: flex-end; 
 
} 
 

 
div:nth-child(2) { 
 
    justify-content: space-between; 
 
}

<div> 
 
    <button>Create</button> 
 
</div> 
 

 
<div> 
 
    <button>Delete</button> 
 
    <button>Update</button> 
 
</div>

瞭解更多關於CSS Flexbox

希望這有助於！