Question

以下是我的代码，其中我试图将最后一个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>

Answer 1

使用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>

Answer 2

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

在主轴上auto margins的一种用法是分隔弹性项目分成不同的“组” ...

.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>

Answer 3

“对齐自身”属性用于调整十字轴上的弹性项目。

请尝试使用此代码。

.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>

Answer 4

另一种方式。

.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>

将所有项目向左对齐，除了flexbox容器中的最后一个

4 个答案: