flexboxが得意とするレイアウト

シンプルな横並び

4つのメニューを単純に横並びで配置する、シンプルなグローバルナビのような一行完結の横並びレイアウトで、flexboxは最も威力を発揮する。
この場合「横並び」を実現しているのはたった1行の「display:flex」だけで、これだけで直下の子要素は自動的に横一列に並び、かつ高さも自動的に揃う。

.gnavList {
　display: flex;  /* メニューの親要素に指定 */
　max-width: 1000px;
　margin: 0 auto;
　border-right: 1px solid #ccc;
}

上下左右中央揃え

flexboxレイアウトでは、主軸・交差軸のそれぞれに対してアイテムの整列方法を自由に設定できるため、主軸がrowであればalign-items:center、主軸がcolumnであればjustify-content:centerとすることで簡単に上下方向にも中央揃えを設定できます。

.hero {
　display: flex;
　justify-content: center;  /* 左右中央揃え */
　align-items: center;  /* 上下中央揃え */
　height: 500px;
　background: #509422;
}

均等配置

flexboxでよく使われるのが、アイテムの「均等配置」。
均等配置の値にはspace-between／space-around／space-evenlyの3種類がある。3つの値の余白の分配方法の違いは以下の通り。

  • space-between：最初と最後のアイテムを両端に寄せ、残りの余白を均等にアイテム間に分配
  • space-around：各アイテムの左右に均等に余白を分配（最初と最後のアイテムの外側の余白は、アイテム間余白の1/2）
  • space-evenly：最初と最後のアイテムの外側およびアイテム間の全ての余白が均等になるように分配
@media screen and (min-width: 768px),print {
　.cardList {
　　display: flex;
　　margin-top: 30px;
　}
　.cardList._space-between {
　　justify-content: space-between;  /* justify-contentで主軸方向の均等配置を行う */
　}
　.cardList._space-around {
　　justify-content: space-around;
　}
　.cardList._space-evenly {
　　justify-content: space-evenly;
　}
　.cardList__item {
　　width: calc((100% - 80px) / 3);
　}
}
inserted by FC2 system