11d. ProgateでHTML&CSS(Flexbox編)

Flexboxでできること

・並び向きを指定できる(縦並び/横並び)
・折り返しの有無を指定できる

<!-- index.html -->
<ul class="flex-list">
	<li class="li1">item1</li>
	<li class="li2">item2</li>
	<li class="li3">item3</li>
	<li class="li4">item4</li>
</ul>

display: flexの使い方

/* stylesheet.css */
.flex-list {
	display: flex;			/* 子要素を横並びにする */
}
.flex-list li {
	flex: auto;				/* 親要素に合わせて伸ばす */
}

要素を2列に折り返す(タブレット用)

/* stylesheet.css */
.flex-list {
	display: flex;
	flex-wrap: wrap;		/* 子要素を折り返す */
}
.flex-list li {
	flex: auto;
	width: 50%;
}

要素を縦に並べる(スマホ用)

/* stylesheet.css */
.flex-list {
	flex-direction: column;		/* 子要素を縦に並べる */
}
.flex-list li {
	margin: 0 auto;				/* 中央寄せにする */
}

※ メディアクエリと合わせてレスポンシブデザインにできます。