Flexbox アイテムが利用可能なスペースを埋めるために伸びるのを防ぐにはどうすればよいですか?

フレックスボックス項目のストレッチ: 解決策と考慮事項

フレックスボックス レイアウトでは、フレックス項目自体のコンテンツが多くても、利用可能なスペースを満たすためにフレックス項目がストレッチされる可能性があります。より小さい。これは、特定の状況で問題になる可能性があります。

アイテムのストレッチの根本原因

この例では、次の CSS により、要素はフレックス コンテナ

の高さまで引き伸ばされます。

div {
  display: flex;
  height: 200px;
}

これにより、

が設定されます。をフレックスコンテナとして作成し、高さを 200px に設定します。 以来、要素は唯一のフレックス アイテムであり、利用可能なスペース全体を埋めるように自動的に引き伸ばされます。

アイテムの引き伸ばしの防止

フレックス アイテムの引き伸ばしを防止するには、主に 2 つの方法があります:

1. align-items プロパティを設定します。 align-items を flex-start に設定すると、整列します。コンテンツのサイズに関係なく、すべての flex アイテムがコンテナーの上部に配置されます。これにより、項目が垂直に伸びることはなくなります。

div {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

2. flex プロパティを使用する: flex プロパティを使用して、個々の flex 項目の柔軟性を制御できます。デフォルトでは、すべての flex 項目の flex 値は 1 です。これは、使用可能なスペースを埋めるために伸縮することを意味します。アイテムが伸びるのを防ぐには、フレックス値を 0 などの低い数値に設定します。

span {
  flex: 0;
}

以上がFlexbox アイテムが利用可能なスペースを埋めるために伸びるのを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

レポ：チームメイトを復活させる方法

4週間前 By 尊渡假赌尊渡假赌尊渡假赌

ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法

3週間前 By 尊渡假赌尊渡假赌尊渡假赌

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？

3週間前 By DDD

R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？

3週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7315

9

Java チュートリアル

1625

14

CakePHP チュートリアル

1348

46

Laravel チュートリアル

1260

25

PHP チュートリアル

1207

29

もっと見る