弹性框 - 在 css 中不使用位置即可正确"flex-direction: column"元素

Question

Flexbox-在CSS中不使用position的情况下获取元素右侧的flex-direction: column;嘿，伙计们，我想把我的元素(一排(移到右边，但不用定位。

此代码包含flex-direction: column;，我无法控制行的位置。如何使用flexbox元素以正确的方式实现它。

body {
margin: 0;
background-color: rgb(247, 176, 232);
}
.container {
display: flex;
flex-direction: column;
height: 50px;
}
.box {
background-color: red;
height: 20px;
width: 50%;
}

<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

Answer 1

flex-direction与定位无关，它只是以row、column、column-reverse和row-reverse这四种方式更改元素的方向，所以在div.box上使用align-self，而不是将其设置为flex-end以将其对齐right或flex-start以将其与left对齐

注意：self-align取决于flex-direction意味着flex-direction上的值会影响它的

示例

body {
margin: 0;
background-color: rgb(247, 176, 232);
}
.container {
display: flex;
flex-direction: column;
height: 50px;
}
.box {
align-self: flex-end;
background-color: red;
height: 20px;
width: 50%;
}

<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

Answer 2

margin-left属性设置元素的左边距。

body {
margin: 0;
background-color: rgb(247, 176, 232);
}
.container {
display: flex;
flex-direction: column;
height: 50px;
}
.box {
background-color: red;
height: 20px;
width: 50%;
}
.right-element {
margin-left: auto;
}

<div class="container">
<div class="box"></div>
<div class="box right-element"></div>
<div class="box"></div>
</div>