Flexで子要素を縦方向に中央と下部に配置する方法

Question

Flexで以下の画像のように表示したいです｡
赤いボックスが親要素で水色のボックスが子要素です｡
CENTERは縦方向に中央で､ENDは縦方向で最下部に表示したいです｡

これを目標に以下のように組みました｡

<div class="mother-box">
  <div class="child-box center-box">CENTER</div>
  <div class="child-box end-box">END</div>
</div>

.mother-box{
  display:flex;
  flex-direction:column;
  background-color:red;
  width:350px;
  height:500px;
}

.child-box{
  background-color:lightblue;
  width:300px;
  height:100px;
  margin:10px;
}

.center-box{
  align-self:center;
}

.end-box{
  align-self:flex-end;
}

縦方向には表示できたものの､横方向にalign-selfがきいてしまいました｡
縦方向に中央と下部に表示するためにはどう書き換えればよいのでしょうか？

Answer 1

align-selfは交差軸方向のレイアウトを決めるものですので、flex-direction:column; のときは、水平方向の位置決めになります。

flex-direction:column; のときの垂直方向の位置決めするプロパティはなさそうですので、
::before疑似要素を追加して、space-between で両端揃えにすればどうでしょう。

.mother-box{
display:flex;
flex-direction:column;
align-items: center; /* 追加 /
justify-content: space-between; / 追加 */
background-color:red;
width:350px;
height:500px;
}
.child-box{
background-color:lightblue;
width:300px;
height:100px;
margin:10px;
}

/* 以下追加 */
.mother-box::before {
content: "";
width:300px;
height:100px;
margin:10px;
}

Answer 2

こんにちは。
あまりスマートなものを思いつきませんでした。

---

絶対配置を使う方法

.mother-box{
  display:flex;
  /*flex-direction:column; 削除*/
  background-color:red;
  width:350px;
  height:500px;
}

.child-box{
  background-color:lightblue;
  width:300px;
  height:100px;
  margin:10px;
}

.center-box{
  align-self:center;
  position: absolute; /* 追加 */
}

.end-box{
  align-self:flex-end;
}

---

疑似要素を使う方法

.mother-box{
  display:flex;
  flex-direction:column;
  background-color:red;
  width:350px;
  height:500px;
  justify-content: space-between;  /* 追加 */
}
.mother-box::before{/* 追加 */
  content: "";
  height:100px;
}

.child-box{
  background-color:lightblue;
  width:300px;
  height:100px;
  margin:10px;
}

/* 削除
.center-box{
  align-self:center;
  position: absolute; 
}

.end-box{
  align-self:flex-end;
}
*/