CSSのフレックス要素

これまでに学んだブロックモデルのタイプに加えて、もう一つあります - フレックス要素です。これらの要素をフレックス要素にするには、それらの要素の親にプロパティdisplayを値flexで設定する必要があります。親自体はブロック要素のままですが、その子要素はフレックス要素になります。

フレックス要素は、ブロック要素と同様に、幅と高さ、marginとpaddingを持つことができます。ただし、ブロック要素とは異なり、デフォルトではフレックス要素は親要素内で横並びに配置されます。

試してみましょう:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex; /* 子要素はフレックス要素になります */
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}