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

希望这有助于！