CSS：父元素底部的项目

Question

对于特定的弹性项目，我可以用 align-self: flex-end 覆盖 align-items: flex-start，有没有办法覆盖 justify-content 特定的弹性项目？

我有一个包含三个子项目的盒子，我需要在盒子底部 (flex_wrapper) 的最后一个项目 (item-3)

喜欢这张图片：

请检查我的代码：

.item-1{
  background: red;
}

.item-2{
  background: blue;
}

.item-3{
  background: yellow;
}


.flex_wrapper{
  background: #ddd;
  width: 400px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flex_items{
  padding: 10px;
}

<div class="flex_wrapper">
    <div class="flex_items item-1">Item 01</div>
    <div class="flex_items item-2">Item 02</div>
    <div class="flex_items item-3">Item 03</div>
</div>

注意：可以通过使用 margin 属性或 position 属性， 但我必须使用 flex-box。

Answer 1

是的，这个其实很简单，只要在底部margin-top:auto给出你想要的元素即可。不需要包装器或额外的元素。

.item-3{

  margin-top:auto;
}

.item-1 {
  background: red;
}

.item-2 {
  background: blue;
}

.item-3 {
  background: yellow;
  margin-top: auto;
}

.flex_wrapper {
  background: #ddd;
  width: 400px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flex_items {
  padding: 10px;
}

<div class="flex_wrapper">
  <div class="flex_items item-1">Item 01</div>
  <div class="flex_items item-2">Item 02</div>
  <div class="flex_items item-3">Item 03</div>
</div>

Answer 2

您需要在flex-grow: 1 之间添加一个不可见的项目以占据空间并将您的第三个项目向下推：

.item-1{
  background: red;
}

.item-2{
  background: blue;
}

.item-3{
  background: yellow;
}


.flex_wrapper{
  background: #ddd;
  width: 400px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flex_items{
  padding: 10px;
}

.separator {
  flex-grow: 1;
}

<div class="flex_wrapper">
    <div class="flex_items item-1">Item 01</div>
    <div class="flex_items item-2">Item 02</div>
    <div class="separator"></div>
    <div class="flex_items item-3">Item 03</div>
</div>