ホームページの作り方コンテンツへスキップホームページの作り方ホームページ作りは楽しいね。Box(flexbox)の使い方を簡単にまとめてみようと思います。flexboxまず、flexboxを使うと何ができるかということですが、一言で言うとレイアウトができるようになります。floatやtable/table-cell等でしていたレイアウトが簡単にできるようになります。レスポンシブ対応で便利です。基本となる構造は次のような感じです。class="flex-row">で大枠を設定して、その中にレイアウトしたい要素を配置します。<div></div></div>古いwebkit(Safari)向けのベンダープレフィックスを付ける場合は次のようにします。rowとすることで、横に並べて表示します。class="flex-row">)全体に配置すようになります。1">4</div></div>縦に並べる縦に並べる場合はflex-directionをcolumnとします。1の値を変えることでできます。ちなみに、flex-growを1、2、3、4としても、各要素の大きさが1:2:3:4になる訳ではありませんのでご注意ください。4">4</div></div>順番を入れ変えるrow-reverseやcolumn-reverseを使うことで、逆順で表示することができます。任意の位置に移動させる場合はorderを使います。初期値は0になっています。1">4</div></div>サンプルこの記事で紹介したサンプルコードは下記でご覧になれます。親要素のスペース(余白)部分を各子要素に割り当てる比率を設定します。コメントをキャンセルメールアドレスが公開されることはありません。