CSSレイアウト機能・Flexboxの仕組み(3)🔴ライブ授業レポート

今回のライブ授業内容

ライブ配信授業《いまどきのHTML＆CSSレイアウトにチャレンジ》のFlexbox（フレックスボックス）の3回目。flexアイテムの横幅制御に関するプロパティを解説しました。

flexコンテナの主軸が横方向（flex-direction: row）の時に、flexアイテムへ指定する次の4つのプロパティを使って横幅を柔軟に制御できます。

flex-basisプロパティ（ベースサイズを指定）
flex-basis: content を用いて、flexアイテム内のコンテンツのサイズに応じては、現在 Firefoxでサポート（Can I use参照）されています。
flex-growプロパティ(伸長係数を指定)
flex-shrinkプロパティ（縮小係数を指定）
この3つをまとめて指定するflexプロパティ

次のURLで完成版のデモページを公開しています。

次回放送は、6月7日23時を予定しています。配信URLが決まり次第、YouTubeチャンネルかTwitterにて告知いたします。

ライブ放送中は、チャット欄にて、授業内容への質問も受け付けています。ぜひ、リアルタイムでご参加くださいませ。