【CSS】フレキシブルボックス(Flexible Box)

      2016/08/15

レイアウトする時はtableやfloatをよく使っていましたが、フレキシブルボックスというレイアウトもあります。

  • 段組みなどの複雑なレイアウトが行える
  • 中央揃え、均等割り付けなども行える

といった特徴があります。
簡単にですが、備忘録として残しておきます。

Flexible Box

  • フレックスコンテナ(親となる要素)で、display:flex と指定する。
  • 並べる方向(主軸)は、flex-directionプロパティを使う。
    row, row-reverse, column, column-reverse を指定できる。
  • 揃え方は、justify-contentプロパティを使う。
    flex-start, flex-end, center, space-between, space-around を指定できる。

(HTML)
<div class="wrapper">
    <div class="box"></div>
    <div class="box"></div>
</div>
(CSS)
.wrapper{
    display: flex;
    
    flex-direction: row;	/* 通常は左から右 */
    
    justify-content: center;    /* 中央ぞろえ */
    
    width: 400px;
    height: 200px;
    background-color: pink;
}
.box{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: purple;
}
実行結果

まとめ

最新のブラウザーでは、ある程度サポートされているようなので、
対応ブラウザを確認したうえで使っていきたいですね。

 - css ,