flexboxを使ってみる

2016.04.16

レイアウトを組むのに便利なflexboxを使ってみます。

対応ブラウザ

flexboxの対応ブラウザはこちら。
IE10からの対応で、対応するブラウザによってはベンダープレフィックスが必要になります。

started-with-flexbox01

サンプルコードではベンダープレフィックスは省略しています。
対応ブラウザによってはベンダープレフィックスを追加するようにしてください。
　

基本的な使い方

flexboxを使用するには、親要素にdisplay:flex;を指定します。

HTML

<div class="flex">
	<div>ボックス01</div>
	<div>ボックス02</div>
	<div>ボックス03</div>
	<div>ボックス04</div>
	<div>ボックス05</div>
</div>

CSS

.flex {
	display: flex;
	max-width: 960px;
	margin: 0 auto;
	border-left: #000 1px solid;
	border-right: #000 1px solid;
}
.flex div {
	margin: 5px;
	padding: 20px;
	background: #cccccc;
}

基本的な使い方のデモページ
　

1番目にmargin-right: auto;を指定すると、1番目だけ左寄せで残りを右寄せにできます。

CSS

.flex div:first-child {
	margin-right: auto;
}

基本的な使い方のデモページ2
　

justify-content

CSS

.flex {
	display: flex;
	justify-content: space-between;
	max-width: 960px;
	margin: 0 auto;
	border-left: #000 1px solid;
	border-right: #000 1px solid;
}
.flex div {
	margin: 5px;
	padding: 20px;
	background: #cccccc;
}

justify-contentのデモページ

justify-content 表示位置の設定。
flex-start: 始端から配置(初期値)
center: 中央に配置
flex-end: 終端から配置
space-between: 均等に配置

　

flex-grow

CSS

.flex {
	display: flex;
	max-width: 960px;
	margin: 0 auto;
	border-left: #000 1px solid;
	border-right: #000 1px solid;
}
.flex div {
	flex-grow: 1;
	margin: 5px;
	padding: 20px;
	background: #cccccc;
}
.flex div:first-child {
	flex-grow: 2;
}

flex-growのデモページ

flex-grow 各要素の引き延ばす比率を設定。

　

flex-shrink

CSS

.flex {
	display: flex;
	max-width: 960px;
	margin: 0 auto;
	border-left: #000 1px solid;
	border-right: #000 1px solid;
}
.flex div {
	flex-shrink: 1;
	margin: 5px;
	padding: 20px;
	background: #cccccc;
}
.flex div:first-child {
	flex-shrink: 5;
}

flex-shrinkのデモページ

flex-shrink 各要素の縮小する比率を設定。

　

flex-basis

CSS

.flex {
	display: flex;
	max-width: 960px;
	margin: 0 auto;
	border-left: #000 1px solid;
	border-right: #000 1px solid;
}
.flex div {
	flex-basis: 100px;
	margin: 5px;
	padding: 20px;
	background: #cccccc;
}
.flex div:first-child {
	flex-basis: 200px;
}

flex-basisのデモページ

flex-basis 各要素のサイズを設定。
flex-directionがcolumnやcolumn-reverseのときは高さの設定。

　

flex-direction

CSS

.flex {
	display: flex;
	flex-direction: column;
	max-width: 960px;
	margin: 0 auto;
	border-left: #000 1px solid;
	border-right: #000 1px solid;
}
.flex div {
	margin: 5px;
	padding: 20px;
	background: #cccccc;
}

flex-directionのデモページ

flex-direction レイアウトの方向の設定。
row: 横方向(初期値)
row-reverse: 横方向でrowの逆
column: 縦方向
column-reverse: 縦方向でcolumnの逆

　

flex-wrap

CSS

.flex {
	display: flex;
	flex-wrap: wrap;
	max-width: 960px;
	margin: 0 auto;
	border-left: #000 1px solid;
	border-right: #000 1px solid;
}
.flex div {
	flex-basis: 200px;
	margin: 5px;
	padding: 20px;
	background: #cccccc;
}

flex-wrapのデモページ

flex-wrap レイアウトを1行に収めるか複数行にするかを設定。
nowrap: 改行しない(初期値)
wrap: 改行する
wrap-reverse: wrapと開始位置と終了位置が入れ替わる

　

align-items

CSS

.flex {
	display: flex;
	align-items: center;
	max-width: 960px;
	margin: 0 auto;
	border-left: #000 1px solid;
	border-right: #000 1px solid;
}
.flex div {
	margin: 5px;
	padding: 20px;
	background: #cccccc;
}
.flex div:nth-child(2) {
	height: 200px;
}

align-itemsのデモページ

align-items 各要素の垂直方向の配置を設定。
stretch: 各要素の高さを揃える(初期値)
flex-start: 始端から配置
center: 中央に配置
flex-end: 終端から配置
baseline: ベースラインに合わせて配置

　

align-content

CSS

.flex {
	display: flex;
	flex-wrap: wrap;
	align-content: space-around;
	max-width: 960px;
	height: 500px;
	margin: 0 auto;
	border-left: #000 1px solid;
	border-right: #000 1px solid;
}
.flex div {
	flex-basis: 200px;
	margin: 5px;
	padding: 20px;
	background: #cccccc;
}
.flex div:nth-child(2) {
	height: 200px;
}

align-contentのデモページ

align-content 縦方向に余白がある場合の垂直方向の表示位置を設定。
stretch: 各要素の高さを揃える(初期値)
flex-start: 始端から詰めて配置
center: 中央に詰めて配置
flex-end: 終端から詰めて配置
space-between: 全体に分配して配置
space-around: 余白を均等にして配置

　

align-self

CSS

.flex {
	display: flex;
	max-width: 960px;
	margin: 0 auto;
	border-left: #000 1px solid;
	border-right: #000 1px solid;
}
.flex div {
	margin: 5px;
	padding: 20px;
	background: #cccccc;
}
.flex div:nth-child(2) {
	height: 200px;
}
.flex div:nth-child(3) {
	align-self: center;
}

align-selfのデモページ

align-self 各要素の垂直方向の配置を個別に設定。
auto: 親のalign-itemsから計算(初期値)
flex-start: 始端から配置
center: 中央に配置置
flex-end: 終端から配置
baseline: ベースラインに合わせて配置
stretch: 各要素の高さを揃える

　

order

CSS

.flex {
	display: flex;
	max-width: 960px;
	margin: 0 auto;
	border-left: #000 1px solid;
	border-right: #000 1px solid;
}
.flex div {
	margin: 5px;
	padding: 20px;
	background: #cccccc;
}
.flex div:first-child {
	order: 1;
}
.flex div:nth-child(2) {
	order: 0;
}
.flex div:nth-child(4) {
	order: -1;
}
.flex div:nth-child(5) {
	order: 0;
}

orderのデモページ

order 各要素の順番を設定。
値の昇順に配置され、値が同じ要素はソースコード内の記述が速い順に配置。
値は負の値を含む整数値

　

【参考サイト】

　

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2024年11月
日 月 火 水 木 金 土
 12
3456789
10111213141516
17181920212223
24252627282930