分解パンケーキ
bookmark_borderbookmark
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
これは、マーケティング サイトによく見られるレイアウトです。たとえば、3 つのアイテムが 1 行に並んでいて、通常は画像、タイトル、商品の特徴を説明するテキストが含まれています。小さい画面では、それらをきれいに積み重ね、画面サイズが大きくなるにつれて拡張する必要があります。
この効果に Flexbox を使用すると、画面のサイズ変更時にこれらの要素の配置を調整するためにメディアクエリを使用する必要がなくなります。
flex の省略形は flex: <flex-grow> <flex-shrink> <flex-basis>
です。
flex-grow
ストレッチ
ボックスが次の行に折り返されるときに伸びてスペースを埋めるようにするには、<flex-grow>
の値を 1 に設定します。次に例を示します。
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
これで、画面サイズを変更すると、これらの Flex アイテムが縮小または拡大するようになります。
ストレッチなし
ボックスを <flex-basis>
サイズに拡大し、小さいサイズでは縮小するが、余分なスペースを埋めるために伸ばさないようにするには、flex: 0 1 <flex-basis>
と記述します。この場合、<flex-basis>
は 150 px です。
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
<div class="parent">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
/* Stretching: */
flex: 1 1 150px;
margin: 5px;
background: red;
gap: 1rem;
}
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2024-12-21 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2024-12-21 UTC。"],[],[]]