💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、参加者は包括的で実践的なアプローチを通じて、CSS Flexbox の flex-basis プロパティを探求します。構造化された HTML ファイルを作成し、徐々に CSS スタイルを追加することで、学習者はコンテナ内のフレックス アイテムの初期サイズに flex-basis がどのように影響するかを理解する実践的な経験を得ます。
この実験では、学生がフレックスボックス レイアウトを作成し、コンテナのプロパティを定義し、個々のアイテムに flex-basis を適用し、さまざまな値を試す方法を案内します。参加者は、flex-basis が他のフレックス プロパティとどのように相互作用するかを学び、応答型ウェブ デザインにおける要素の基本的なサイズ調整と配置を制御することができます。
このステップでは、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> 要素がありますWebIDE にファイルを保存したときの例の出力は次のとおりです。
File created: ~/project/flexbox-demo.htmlこのステップでは、前のステップで作成した 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 プロパティについて学び、それがフレックス アイテムの初期サイズをどのように制御するかを学びます。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 addedHTML ファイルをブラウザで開くと、それぞれの 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 configurationsHTML ファイルをブラウザで開くと、異なる 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 interactionsHTML ファイルをブラウザで開くと、これらのプロパティが協働して柔軟なレイアウトを作成する仕組みがわかります。
この実験では、参加者は包括的な HTML と CSS のデモを作成することで、CSS Flexbox の flex-basis プロパティを探求します。この実験は、複数のフレックス アイテムを持つコンテナを備えた基礎となる HTML ファイルを構築することから始まり、Flexbox レイアウトの実験のための構造フレームワークを確立します。参加者は、CSS を使用して基本的な flexbox コンテナを定義する方法を学び、表示プロパティ、背景色、初期スタイルを設定して、応答性が高く視覚的に魅力的なレイアウトを作成します。
この実験では、学習者がフレックス アイテムに flex-basis プロパティを適用する方法を案内し、追加のスペースが分配される前にこのプロパティがフレックス要素の初期サイズをどのように制御するかを理解できるようにします。さまざまな flex-basis 値を試し、他の flex プロパティとの相互作用を探求することで、参加者は、フレックスボックス コンテナ内の柔軟なレイアウトの管理と要素サイズの制御に関する実践的な洞察を得ます。
