はじめに
この実験では、参加者は包括的で実践的なアプローチを通じて、CSS Flexbox の flex-basis プロパティを探求します。構造化された HTML ファイルを作成し、徐々に CSS スタイルを追加することで、学習者はコンテナ内のフレックス アイテムの初期サイズに flex-basis がどのように影響するかを理解する実践的な経験を得ます。
この実験では、学生がフレックスボックス レイアウトを作成し、コンテナのプロパティを定義し、個々のアイテムに flex-basis を適用し、さまざまな値を試す方法を案内します。参加者は、flex-basis が他のフレックス プロパティとどのように相互作用するかを学び、応答型ウェブ デザインにおける要素の基本的なサイズ調整と配置を制御することができます。
Flexbox レイアウト用の HTML ファイルを作成する
このステップでは、CSS Flexbox の flex-basis プロパティを探求するための基本的な HTML ファイルを作成します。flexbox レイアウトの実験の基礎となる簡単な HTML 構造を設定します。
WebIDE を開き、~/project ディレクトリに移動します。WebIDE のインターフェイスを使用して、flexbox-demo.html という新しいファイルを作成します。
次のような基本的な HTML 構造を使用します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Flexbox flex-basis Demo</title>
<style>
/* CSS スタイルは後続のステップで追加されます */
</style>
</head>
<body>
<div class="container">
<div class="flex-item item1">Item 1</div>
<div class="flex-item item2">Item 2</div>
<div class="flex-item item3">Item 3</div>
<div class="flex-item item4">Item 4</div>
<div class="flex-item item5">Item 5</div>
</div>
</body>
</html>
HTML 構造を分解してみましょう。
containerクラスを持つコンテナ<div>を作成しました- コンテナの中に、
flex-itemクラスと個々のアイテム クラスを持つ 5 つの<div>要素があります - この構造により、次のステップで flex-basis プロパティを示すことができます
WebIDE にファイルを保存したときの例の出力は次のとおりです。
File created: ~/project/flexbox-demo.html
基本的な CSS Flexbox コンテナを定義する
このステップでは、前のステップで作成した HTML ファイルにスタイルを追加することで、基本的な CSS Flexbox コンテナを作成する方法を学びます。WebIDE で flexbox-demo.html ファイルを開き、<style> セクションを変更して flexbox コンテナを定義します。
基本的な flexbox コンテナを定義するには、次の CSS を追加します。
<style>
.container {
display: flex;
background-color: #f0f0f0;
border: 2px solid #333;
padding: 20px;
}
.flex-item {
background-color: #4caf50;
color: white;
margin: 10px;
padding: 20px;
text-align: center;
}
</style>
重要な CSS プロパティを分解してみましょう。
display: flex;はコンテナを flex コンテナに変換しますbackground-colorとborderはコンテナを視覚的に確認しやすくします.flex-itemのスタイルは個々の flex アイテムの外観を定義しますmarginとpaddingはアイテム間の余白を提供します
ファイルを保存したときの例の出力は次のとおりです。
Flexbox container styles added to flexbox-demo.html
この HTML ファイルをブラウザで開くと、水平に並んだ 5 つの緑色のボックスが表示され、デフォルトの flex レイアウトが示されます。
フレックス アイテムに flex-basis プロパティを適用する
このステップでは、flex-basis プロパティについて学び、それがフレックス アイテムの初期サイズをどのように制御するかを学びます。WebIDE で flexbox-demo.html ファイルを開き、CSS スタイルを更新して flex-basis を示します。
個々のフレックス アイテムに flex-basis を適用するには、次の CSS を追加します。
<style>
.container {
display: flex;
background-color: #f0f0f0;
border: 2px solid #333;
padding: 20px;
}
.flex-item {
background-color: #4caf50;
color: white;
margin: 10px;
padding: 20px;
text-align: center;
}
.item1 {
flex-basis: 100px;
}
.item2 {
flex-basis: 200px;
}
.item3 {
flex-basis: 150px;
}
.item4 {
flex-basis: 250px;
}
.item5 {
flex-basis: 120px;
}
</style>
flex-basis に関するポイント：
- フレックス アイテムの初期の主なサイズを設定します
- ピクセル、パーセント、またはその他の単位で指定できます
- フレックスの拡大または縮小の前の既定のサイズを決定します
- フレックス コンテナ内で
widthを置き換えます
ファイルを保存したときの例の出力は次のとおりです。
Flex items with different flex-basis values added
HTML ファイルをブラウザで開くと、それぞれの flex-basis 値に基づいて初期幅が異なるフレックス アイテムが表示されます。
さまざまな flex-basis 値を試す
このステップでは、flex-basis 値を指定するさまざまな方法を探求し、異なる単位やアプローチがフレックス アイテムのサイズにどのように影響するかを理解します。次のスタイルを使って flexbox-demo.html ファイルの CSS を更新します。
<style>
.container {
display: flex;
background-color: #f0f0f0;
border: 2px solid #333;
padding: 20px;
}
.flex-item {
background-color: #4caf50;
color: white;
margin: 10px;
padding: 20px;
text-align: center;
}
/* さまざまな flex-basis 値のタイプ */
.item1 {
flex-basis: 100px;
} /* 固定のピクセル幅 */
.item2 {
flex-basis: 20%;
} /* コンテナのパーセンテージ */
.item3 {
flex-basis: auto;
} /* コンテンツに基づく */
.item4 {
flex-basis: 10rem;
} /* rem 単位を使用 */
.item5 {
flex-basis: content;
} /* コンテンツ サイズに基づく */
</style>
flex-basis 値に関する主な考察：
- ピクセル値 (
100px) は固定幅を提供します - パーセンテージ値 (
20%) はコンテナに対して相対的にスケーリングされます autoはアイテムのコンテンツ サイズを使用しますremのような異なる単位は応答型のサイズ調整を提供しますcontentキーワードはアイテムのコンテンツに適応します
ファイルを保存したときの例の出力は次のとおりです。
Flex items with diverse flex-basis configurations
HTML ファイルをブラウザで開くと、異なる flex-basis 値がアイテムのサイズとレイアウトにどのように影響するかがわかります。
他の Flex プロパティとの flex-basis の相互作用を調べる
このステップでは、flex-basis が flex-grow や flex-shrink などの他の Flex プロパティとどのように相互作用するかを学びます。次の包括的な例を使って flexbox-demo.html ファイルの CSS を更新します。
<style>
.container {
display: flex;
background-color: #f0f0f0;
border: 2px solid #333;
padding: 20px;
width: 100%;
}
.flex-item {
background-color: #4caf50;
color: white;
margin: 10px;
padding: 20px;
text-align: center;
}
/* Flex プロパティの相互作用を示す */
.item1 {
flex-basis: 100px;
flex-grow: 1;
flex-shrink: 0;
}
.item2 {
flex-basis: 200px;
flex-grow: 2;
flex-shrink: 1;
}
.item3 {
flex-basis: 150px;
flex-grow: 1;
flex-shrink: 2;
}
.item4 {
flex: 1 1 250px; /* grow、shrink、basis の省略形 */
}
.item5 {
flex: 2 0 120px;
}
</style>
Flex プロパティの相互作用の重要な概念：
flex-grow: アイテムが他のアイテムに対してどれだけ成長するかを決定しますflex-shrink: アイテムが他のアイテムに対してどれだけ縮小するかを制御しますflex省略形は grow、shrink、basis を組み合わせます- 異なる組み合わせにより独自のレイアウトの動作が作成されます
ファイルを保存したときの例の出力は次のとおりです。
Flex items with complex grow, shrink, and basis interactions
HTML ファイルをブラウザで開くと、これらのプロパティが協働して柔軟なレイアウトを作成する仕組みがわかります。
まとめ
この実験では、参加者は包括的な HTML と CSS のデモを作成することで、CSS Flexbox の flex-basis プロパティを探求します。この実験は、複数のフレックス アイテムを持つコンテナを備えた基礎となる HTML ファイルを構築することから始まり、Flexbox レイアウトの実験のための構造フレームワークを確立します。参加者は、CSS を使用して基本的な flexbox コンテナを定義する方法を学び、表示プロパティ、背景色、初期スタイルを設定して、応答性が高く視覚的に魅力的なレイアウトを作成します。
この実験では、学習者がフレックス アイテムに flex-basis プロパティを適用する方法を案内し、追加のスペースが分配される前にこのプロパティがフレックス要素の初期サイズをどのように制御するかを理解できるようにします。さまざまな flex-basis 値を試し、他の flex プロパティとの相互作用を探求することで、参加者は、フレックスボックス コンテナ内の柔軟なレイアウトの管理と要素サイズの制御に関する実践的な洞察を得ます。
