Zenn
🦡

FlexboxでLayoutする。

2021/02/15に公開
CSS
HTML
layout
flex
tech

背景

AngularのモジュールであるAngular-materialを使おうとしたところ、Layoutシステムがない。
（LayoutシステムってBootstrapとかのColumn的なもの）
Layoutシステムがない状態でどうすればと悩んでいたところ、どうやらFlexboxというものを使ってCSSでLayoutを実現するのが定石らしい。
少し調べたのでここにまとめておく。

使い方

基礎

下記のコードで横並びの均等なLayoutになる。
columnを増やしても数に依存した形で均等な配置になる。

.rows{
  display: flex;
}
.row{
  flex: 1;
}

<div class="rows">
	<div class="row">
		a
	</div>
	<div class="row">
		b
	</div>
</div>

イメージ

比の変更

配置の場合の比率を変更したい場合はflexの数を変更する。
0の場合は対象外、2の場合は1つに割り振られる予定だった領域の2倍分を占領する。

.rows{
  display: flex;
}
.row{
  flex: 1;
}
.row2{
  flex: 2;
}


<div class="rows">
	<div class="row">
		a
	</div>
	<div class="row">
		b
	</div>
	<div class="row2">
		c
	</div>
</div>

イメージ

縦方向

flex-directionをcolumnに設定することで、縦方向に変更することもできる。

.columns{
  display: flex;
  flex-direction:column;
  min-height: 100vh;
}
.column{
  flex: 1;
}
.column2{
  flex: 2;
}


<div class="columns">
	<div class="column">
		a
	</div>
	<div class="column">
		b
	</div>
	<div class="column2">
		c
	</div>
</div>

イメージ

注意

色々な歴史があり、対応が遅れているブラウザもあるようです。
用法用量を守って正しくお使いください。

参考：http://www.tohoho-web.com/css/prop/flex.htm

Discussion