将柔性盒容器中除最后一个项目外的所有项目向左对齐

下面是我的代码，我试图将最后一个div(class="four")向右对齐，我使用align-self: flex-end;，但仍然没有向右对齐。让我知道我在这里做错了什么。

.container {
display: flex;
flex-direction: row;
border: 2px solid blue;
}
.one {
background: red;
}
.two {
background: yellow;
}
.three {
background: pink;
}
.four {
background: teal;
display: inline-block;
align-self: flex-end;
}

<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>

margin-left:auto;将完成此项工作。

主轴中自动边距的一个用途是分离灵活项目分成不同的"群体"。。。

.container {
display: flex;
flex-direction: row;
border: 2px solid blue;
}
.one {
background: red;
}
.two {
background: yellow;
}
.three {
background: pink;
}
.four {
background: teal;
display: inline-block;
margin-left:auto;
}

<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>

使用margin-left: auto

.container {
display: flex;
flex-direction: row;
border: 2px solid blue;
}
.one {
background: red;
}
.two {
background: yellow;
}
.three {
background: pink;
}
.four {
background: teal;
display: inline-block;
margin-left: auto;
}

<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>

Align self属性用于调整十字轴上的弹性项。

请尝试此代码。

.container {
display: flex;
flex-direction: row;
border: 2px solid blue;
}
.one {
background: red;
}
.two {
background: yellow;
}
.three {
background: pink;
}
.four {
background: teal;
margin-left: auto;
}

<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>

另一种方法。

.container {
display: flex;
flex-direction: row;
border: 2px solid blue;
position: relative;
}
.one {
background: red;
}
.two {
background: yellow;
}
.three {
background: pink;
}
.four {
background: teal; 
right: 0;
position: absolute;
}

<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
</div>

相关内容

最新更新

热门标签：