Zenn
😁

【CSS】Flexboxのいろは

2020/09/21に公開
CSS
webデザイン
Flexbox
tech

Flexbox、便利じゃね？

最近CSSの勉強をしています。
というのもフロントエンドの技術が足りないなぁと思い、Webデザインの勉強をしているからです。

ProgateでHTML&CSSの講座を一通りやったのですが、
Flexboxがかなり便利だったので知っている限りの色んなFlexboxを紹介していきます。

以下のようなHTMLを想定します。
※parent→親要素、child→子要素

<div class="parent">
	<div class="child ch1">Child 1</div>
	<div class="child ch2">Child 2</div>
	<div class="child ch3">Child 3</div>
	<div class="child ch4">Child 4</div>
</div>

横並び

横幅を気にせず単純に横並びにしたいとき。

.parent {
 display:flex;
 }

displayプロパティ

  • block : ブロック要素として扱う。縦に並ぶ。
  • inline : インライン要素として扱う。横に並ぶ（インライン→「１行の中に」の意？）
  • inline-block : インラインブロック要素として扱う。横に並び、幅や高さを指定できる。
  • none : 要素を非表示にする。
  • flex : 通常縦並びのところを横並びにできる。

折り返し

子要素の幅に応じて折り返したいとき。

.parent {
 flex-wrap:wrap;
 }
 
 .child {
  /* 2個ごとで折り返したい場合は、100%/ 2個 = 50%を指定。*/
  width:50%;
}

flex-wrapプロパティ

  • nowrap : 初期値。折り返されずに表示される。
  • wrap : 複数行に折り返して表示する。
  • wrap-reverse : 複数行に、逆順で折り返して表示する。

順序

要素の並び順を変えたいとき

.ch1 { order:2; }
.ch2 { order:4; }
.ch3 { order:1; }
.ch4 { order:4; }

orderプロパティ

  • 整数値のみ指定可能。つまり負の数もOK。
  • 同じ親要素の中で、orderの値が小さい順に左（もしくは上）から表示される。

まとめ

レスポンシブデザインの作成に使えそうです。
実際に使えるように今から練習します。

参考

Discussion