Question

我尝试创建一个布局，其中我的大部分项目都对齐到视口的左侧，但是一个项目需要与右侧对齐。

我不想在此实例中使用float: right;，而是希望使用justify-content: flex-end;

我已经制作了一个可视化显示正确布局的codepen，但是它有一个额外的div（我标题为.remove-this-div），我不想在那里，因为我想要保持我的标记尽可能干净，并避免不需要的包装div

在我按下right对齐按钮后的标记是这样的：

<section>
  <div>I sit to the left</div>
  <div>I sit to the left</div>
  <div>I sit to the left</div>
  <div>I sit to the left</div>
  <button>I sit to the right</button>
</section>

Answer 1

section {
  display: flex;
  flex-direction: column;
  width: 500px;
}

button { 
  align-self: flex-end;   /* `margin-left: auto` would also work */
} 

section > * {
  outline: 1px solid black;
}

<section>
  <div>I sit to the left</div>
  <div>I sit to the left</div>
  <div>I sit to the left</div>
  <div>I sit to the left</div>
  <button>I sit to the right</button>
</section>

Revised Codepen

有关弹性对齐和auto边距的更多信息，请访问：Methods for Aligning Flex Items

Answer 2

您在这里寻找的属性是align-self：

section{
    display:flex;
    font-family:sans-serif;
    flex-direction:column;
    justify-content:flex-start;
}
button{
    align-self:flex-end;
}

<section>
    <div>I sit to the left</div>
    <div>I sit to the left</div>
    <div>I sit to the left</div>
    <div>I sit to the left</div>
    <button>I sit to the right</button>
</section>

右对齐Flex项目，无需额外的包装

2 个答案: