CSS：父元素底部的项目

Question

我可以使用 { "_id" : ObjectId("5aeb6b71709f43359e0888bb"), "data" : [ { "groupDate" : ISODate("2018-05-02T00:00:00Z"), "assignedCount" : 1, "resolvedCount" : 0 } ] } 覆盖align-items: flex-start特定的弹性项目，是否有任何方法可以覆盖对齐的内容  特定的弹性项目？

我有一个包含三个子项的框，我需要我框底部的最后一项（align-self: flex-end）item-3）

喜欢这张图片：

请检查我的代码：

＆＃13;

＆＃13;

flex_wrapper

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

  

注意：可以使用保证金属性或头寸属性，   但我必须使用flex-box。

Answer 1

是的，这实际上非常简单，只需在底部margin-top:auto提供您想要的元素。不需要包装或额外元素。

.item-3{

  margin-top:auto;
}

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要在flex-grow: 1之间添加一个隐身物品以占据空间并推倒您的第三个项目：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;