フレックス要素基本

目次

• 横並びに配置する
• 並び順を変更する
• 並んだ要素を折り返す
• 要素の配置を変える（水平）
• 要素の配置を変える（垂直）
• directionとwrapを同時に指定する

横並びに配置する

<div class="container">
　　<div class="box">box1</div>
　　<div class="box">box2</div>
　　<div class="box">box3</div>
　　<div class="box">box4</div>
</div>
div.container{ display: flex; background-color: aquamarine; }
div.box{ aspect-ratio: 1; width: 15%; margin: 5%; background-color: orange; }

並び順を変更する

右から左
HTML部分は一緒
div.container{ display: flex; flex-direction: row-reverse; background-color: aquamarine; }

下から上
HTML部分は一緒
div.container{ display: flex; flex-direction: column-reverse; background-color: aquamarine; }

並んだ要素を折り返す

親要素をはみ出して並べられている状態（サンプル）

左上から右下
HTML部分は一緒
div.container{ display: flex; flex-wrap: wrap; background-color: aquamarine; }

左下から右上
HTML部分は一緒
div.container{ display: flex; flex-wrap: wrap-reverse; background-color: aquamarine; }

要素の配置を変える（水平）

中心に寄せる
HTML部分は一緒
div.container{ display: flex; justify-content: center; background-color: aquamarine; }

最初と最後は端っこで、残りを均等な間隔で配置
HTML部分は一緒
div.container{ display: flex; justify-content: space-between; background-color: aquamarine; }

最初と最後は端っこで、かつ両端にboxの半分の大きさのmarginを取り、残りを均等な間隔で配置
HTML部分は一緒
div.container{ display: flex; justify-content: space-between; background-color: aquamarine; }

要素の配置を変える（垂直）

中心に配置する
HTML部分は一緒
div.container{ display: flex; height: 80vh; align-items: center; background-color: aquamarine; }
(vh : ブラウザの表示領域の縦幅の80%)

子要素の中心線を揃えて配置する
※aspect-ratioを使うと意図しない動作になり、書くのが面倒なのでコード省略

directionとwrapを同時に指定する

組み合わせはいくらでもあるが、今回は新しい順に表示するケースを想定する
div.container{ display: flex; flex-flow: row-reverse wrap-reverse; background-color: aquamarine;}