flex は CSS プロパティです。 css flex プロパティは、flex-grow、flex-shrink、および flex-basis プロパティの省略形です。要素が子要素でない場合に、フレックス ボックス モデル オブジェクトの子要素がスペースを割り当てる方法を設定または取得するために使用されます。フレックス ボックス モデル オブジェクトの flex プロパティは機能しません。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
flex は CSS プロパティです。
flex プロパティは、フレックス ボックス モデル オブジェクトの子要素がスペースを割り当てる方法を設定または取得するために使用されます。
flex プロパティは、flex-grow、flex-shrink、および flex-basis プロパティの省略形プロパティです。デフォルト値は 0 1 auto です。
この属性には、auto (1 1 auto) と none (0 0 auto) という 2 つのショートカット値があります。ブラウザーが関連する値を推測するため、3 つの個別の属性を個別に記述するのではなく、この属性を最初に使用することをお勧めします。
注: 要素がフレックスボックス モデル オブジェクトの子要素ではない場合、flex 属性は効果がありません。
構文:
flex: flex-grow flex-shrink flex-basis|auto;
flex-grow 他の柔軟な項目と比較して項目が増加する量を指定する数値。
flex-shrink 他の柔軟なアイテムと比較してアイテムが縮小する量を指定する数値。
flex-basis 項目の長さ。有効な値: 「auto」、「inherit」、または数値の後に「%」、「px」、「em」、またはその他の長さ単位が続きます。
#auto は 1 1 auto と同じです。
#none は 0 0 auto と同じです。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main
{
width:220px;
height:300px;
border:1px solid black;
display:flex;
}
#main div
{
flex:1;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">红色</div>
<div style="background-color:lightblue;">蓝色</div>
<div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
</div>
</body>
</html>
(学習ビデオ共有: css ビデオ チュートリアル)
以上がflex は CSS プロパティですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
非常に多くの色のリンクApr 13, 2025 am 11:36 AM最近の色に関するツール、記事、リソースの実行がありました。あなたの楽しみのためにここにそれらを丸くすることで、私がいくつかのタブを閉じてもらいましょう。
FlexBoxでの自動マージンの仕組みApr 13, 2025 am 11:35 AMロビンは以前にこれをカバーしたことがありますが、私は過去数週間でそれについての混乱を聞いて、他の人がそれを説明することに刺されたのを見ました、そして私は望んでいました
動く虹色の下線Apr 13, 2025 am 11:27 AMサンドイッチサイトのデザインが大好きです。多くの美しい特徴の中には、これらの見出しがあり、レインボーの下線が下線を描いて、スクロールするときに動きます。そうではありません
新年、新しい仕事？グリッド駆動の履歴書を作成しましょう！Apr 13, 2025 am 11:26 AM多くの人気のある履歴書設計は、グリッド形状にセクションを配置することにより、利用可能なページスペースを最大限に活用しています。 CSSグリッドを使用して、レイアウトを作成しましょう
リロードしすぎるという習慣からユーザーを分解する1つの方法Apr 13, 2025 am 11:25 AMページのリロードは何かです。ページが反応しないと思われるとき、または新しいコンテンツが利用可能であると信じるときにページを更新することもあります。時々私たちはただ怒っています
Reactを使用したドメイン駆動型のデザインApr 13, 2025 am 11:22 AMReactの世界でフロントエンドアプリケーションを整理する方法に関するガイダンスはほとんどありません。 （「正しいと感じる」までファイルを移動するだけです笑）。真実
非アクティブユーザーの検出Apr 13, 2025 am 11:08 AMほとんどの場合、ユーザーがアプリケーションに積極的に関与しているのか、一時的に非アクティブであるかを本当に気にしません。非アクティブ、意味、おそらく彼ら
Wufoo ZapierApr 13, 2025 am 11:02 AMWufooは常に統合に優れています。キャンペーンモニター、MailChimp、TypeKitなどの特定のアプリと統合されていますが、
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
メモ帳++7.3.1
使いやすく無料のコードエディター
