フレックスボックス Test

デフォルト

ソースはここをクリック

<div class="flexboxNum0">　　//クラス名以外は以下のサンプルのマークアップはすべて同じ
	<div>1.きみはぼくのとなりで…</div>
	<div>2.ねむっているのではな…</div>
	<div>3.きみはもうじぶんのこ…</div>
	<div>4.きみがそばへくるとき…</div>
	<div>5.ゆうべゆめのなかでぼ…</div>
	<div>6.ふたりとももうしぬの…</div>
	<div>7.きみとともだちになん…</div>
</div>

/*====================================================
*	Flexbox base
====================================================*/
div[class^="flexboxNum"] {
	display: flex;
	width: 90%;
	height: auto;
	margin: 0 auto;
	padding: 2rem;
	background: #eee;
	font-size: 1.2rem;
	}
div[class^="flexboxNum"] div {
	box-sizing: border-box;
	margin: 0;
	padding: .5rem;
	border: 1rem solid transparent;
	box-shadow: inset 0 0 0 1px #ccc;
	color: #fff;
	}
/*====================================================
*	Flexbox No.0 デフォルト
====================================================*/
div.flexboxNum0 {
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	}
div.flexboxNum0 div {
	width: fit-content;
	}

CLOSE

等幅に指定

ソースはここをクリック

/*====================================================
*	Flexbox No.1 等幅に指定
====================================================*/
div.flexboxNum1 {
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	}
div.flexboxNum1 div {
	width: 12rem;
	}

CLOSE

可変幅対応

ブラウザ幅によって縦横切り替えする

ソースはここをクリック

/*====================================================
*	Flexbox No.2 可変幅対応
====================================================*/
div.flexboxNum2 {
	flex-direction: row;
	}
div.flexboxNum2 div {
	width: fit-content;
	}
@media screen and (max-width: 767.9px) {
	div.flexboxNum2 {
		flex-direction: column;
		}
	div.flexboxNum2 div {
		width: 90%;
		margin: .5rem auto;
		}
	}

CLOSE

横並び折り返し

ソースはここをクリック

/*====================================================
*	Flexbox No.3 横並び折り返し
====================================================*/
div.flexboxNum3 {
	flex-wrap: wrap;
	align-content: flex-start;
	}

CLOSE

横並び右揃え

ソースはここをクリック

/*====================================================
*	Flexbox No.4 横並び右揃え
====================================================*/
div.flexboxNum4 {
	justify-content: flex-end;
	flex-wrap: wrap;
	align-content: center;
	}

CLOSE

縦並び

ソースはここをクリック

/*====================================================
*	Flexbox No.5 縦並び
====================================================*/
div.flexboxNum5 {
	flex-direction: column;
	}
div.flexboxNum5 div {
	width: fit-content;
	}

CLOSE

縦方向中央合わせ

ソースはここをクリック

/*====================================================
*	Flexbox No.6 中央合わせ
====================================================*/
div.flexboxNum6 {
	flex-direction: row;
	flex-wrap: nowrap;	
	justify-content: center;
	align-items: center;
	align-content: normal;
	}
div.flexboxNum6 div {
	width: 14.285%;
	}

CLOSE