flex は CSS プロパティですか?-CSSチュートリアル-php.cn

flex は CSS プロパティですか?

青灯夜游

リリース： 2021-11-18 17:09:07

オリジナル

1749 人が閲覧しました

flex は CSS プロパティです。 css flex プロパティは、flex-grow、flex-shrink、および flex-basis プロパティの省略形です。要素が子要素でない場合に、フレックスボックスモデルオブジェクトの子要素がスペースを割り当てる方法を設定または取得するために使用されます。フレックスボックスモデルオブジェクトの flex プロパティは機能しません。

flex は CSS プロパティですか?

このチュートリアルの動作環境: 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>

ログイン後にコピー

flex は CSS プロパティですか?