CSS3 フレックス ボックス (フレックス ボックス)
CSS3 Flex Box
Flex Box は CSS3 の新しいレイアウト モードです。
CSS3 フレキシブル ボックス (フレキシブル ボックスまたはフレックスボックス) は、ページがさまざまな畫面サイズやデバイスの種類に適応する必要がある場合に、要素が適切に動作することを保証するレイアウト方法です。
フレックスボックス レイアウト モデルを?qū)毪工肽康膜?、コンテナ?nèi)のサブ要素に空のスペースを配置、整列、割り當(dāng)てるためのより効率的な方法を提供することです。
CSS3 フレキシブルボックスのコンテンツ
フレキシブルボックスは、Flex コンテナと Flex アイテムで構(gòu)成されます。
フレキシブル コンテナは、display プロパティの値を flex または inline-flex に設(shè)定することで、フレキシブル コンテナとして定義されます。
フレキシブル コンテナには 1 つ以上のフレキシブルなサブ要素が含まれます。
注: フレキシブル コンテナの外側(cè)とフレキシブル子要素內(nèi)は通常どおりレンダリングされます。フレックス ボックスは、フレックス 子要素がフレックス コンテナ內(nèi)でどのようにレイアウトされるかを定義するだけです。
フレキシブルサブ要素は通常、フレックスボックス內(nèi)に 1 行で表示されます。デフォルトでは、コンテナーごとに 1 行のみが存在します。
以下の要素は、elastic サブ要素が左から右に一列に表示されていることを示しています:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>以下は簡単な例を通して古いバージョンの各屬性を説明します:
<html>
<head>
<meta charset="utf-8">
<style>
p{
width:150px;
border:3px solid lightblue;
background:lightgreen;
padding:5px;
margin:5px;
}
</style>
</head>
<body>
<div>
<p>發(fā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給發(fā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給</p>
<p>發(fā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給</p>
<p>發(fā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃</p>
</div>
</body>
</html>上記の結(jié)果は正常ですが、次の例を見てください:
<html>
<head>
<meta charset="utf-8">
<style>
p{
width:150px;
border:3px solid lightblue;
background:lightgreen;
padding:5px;
margin:5px;
}
div{
display:-webkit-box;
display:box;
}
</style>
</head>
<body>
<div>
<p>發(fā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給發(fā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給</p>
<p>發(fā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給</p>
<p>發(fā)生過的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃</p>
</div>
</body>
</html>ほら、すべての p 要素がボックスになりました。これが柔軟なレイアウトの魔法です。
上記では、div要素の表示を舊バージョンのフレキシブルレイアウトであるboxに設(shè)定しています。古いバージョンのブラウザの場合は、-webkit- プレフィックスを追加する必要があります。
古いバージョンのエラスティック レイアウトには 2 つの屬性値があります:
box: コンテナ ボックス モデルをブロック レベルのエラスティック ボックスとして表示します。 inline-box: コンテナ ボックス モデルをインライン レベルのエラスティック ボックスとして表示します。
PS: know ブロック レベルでは、div 要素などの行全體を占有しますが、インライン レベルでは、span 要素などの行全體を占有しません。しかし、私たちはボックス全體を、誰も占有しないように設(shè)定し、一貫性を保ちました。上の例と同様に、div 要素にボックスが設(shè)定されている場合、div 要素內(nèi)の p 要素は占有されません。
box-orient屬性
box-orient屬性は主にボックス內(nèi)の要素の流れの方向を?qū)g現(xiàn)します。
div{
display:-webkit-box;
display:box;
-webkit-box-orient:vertical;
box-orient:vertical;
}この時(shí)の結(jié)果は縦方向の配置です:
この屬性の屬性値は次のとおりです:
horizo??ntal: フレキシブルアイテムが左から右に橫方向に配置されます。vertical: フレキシブルアイテムが左から右に縦方向に配置されます。上から下へ inline-axis: フレキシブルなアイテムがインライン軸に沿って配置され、表示されます block-axis: フレキシブルなアイテムがブロック軸に沿って配置され、表示されます
試してみると良いでしょう: horizo??ntal 軸と inline-axis は両方とも水平に配置されます。一方、vertical 軸と block axis は両方とも垂直に配置されます。
ボックス方向?qū)傩?/strong>
box-direction 屬性は主に、スケーラブル コンテナー內(nèi)のフロー順序を設(shè)定するために使用されます。
div{
display:-webkit-box;
display:box;
-webkit-box-direction:reverse;
box-direction:reverse;
}この屬性の屬性値は次のとおりです:
normal : 通常の順序、デフォルト値 reverse : 逆順
box-pack 屬性
box-pack 屬性は、スケーラブルなプロジェクトの配布方法に使用されます。
この屬性の屬性値は次のとおりです:
start : 伸縮アイテムは始點(diǎn)に揃えられます end : 伸縮アイテムは終點(diǎn)に揃えられます center : 伸縮アイテムは中心點(diǎn)に揃えられます justify :伸縮アイテムは均等に分配されます
以下ですべて試してみましょう 各屬性値の効果を見てみましょう:
start 屬性値:
div{
-webkit-box-pack:start;
box-pack:start;
}2.end 屬性値:
div{
-webkit-box-pack:
end
;
box-pack:
end
;
}3.center 屬性値:
div{
-webkit-box-pack:
center
;
box-pack:
center
;
}4.justify 屬性値:
div{
-webkit-box-pack:
justify
;
box-pack:
justify
;
}追記: 垂直 方向も同様の原理ですが、高さが自動の場合は効果が出ません。したがって、高さには固定の高さを設(shè)定する必要があります (デフォルトよりも高いことが望ましい)。このとき、垂直方向の効果が確認(rèn)できます。ここでは詳細(xì)には觸れません。
box-align 屬性
box-align 屬性は、スケーラブルなコンテナーの余分なスペースを処理するために使用されます。
この屬性の屬性値は次のとおりです:
開始 ： 伸縮プロジェクトは上部に基づいており、下部の余分なスペースはクリアされます 終了 ： 伸縮プロジェクトは下部に基づいており、上部の余分なスペースをクリアします 中央 ： テレスコピックプロジェクトは中央をベースにし、上部と下部を均等にクリアします 余分なスペースのベースライン： スケーラブルなプロジェクトはベースラインに基づいて、余分なスペースをクリアします ストレッチ： スケーラブルなプロジェクトコンテナ全體を埋めます (デフォルト値)
同様に、各屬性値の効果を試します:
1.start 屬性値
div{
display:-webkit-box;
display:box;
-webkit-box-align:start;
box-align:start;
}2.end 屬性値
div{
display:-webkit-box;
display:box;
-webkit-box-align:
end
;
box-align:
end
;
}3.center 屬性値
div{
display:-webkit-box;
display:box;
-webkit-box-align:
center
;
box-align:
center
;
}4。ベースライン屬性値
box-orient がインライン単一軸または水平の場合、すべての子要素はベースラインに揃えられます。
div{
display:-webkit-box;
display:box;
-webkit-box-orient:horizontal;
box-orient:horizontal;
-webkit-box-align:baseline;
box-align:baseline;
}そして、box-orient がブロック軸または垂直の場合、すべての子要素は中央揃えで垂直に配置されます。
div{
display:-webkit-box;
display:box;
-webkit-box-orient:vertical;
box-orient:vertical;
-webkit-box-align:baseline;
box-align:baseline;
}5.stretch 屬性値
すべての子要素は、それを含むブロックを満たすように引き伸ばされます。
div{
display:-webkit-box;
display:box;
-webkit-box-align:stretch;
box-align:stretch
;}box-flex プロパティ
box-flex プロパティは、浮動小數(shù)點(diǎn)數(shù)を使用してスケーラブルな項(xiàng)目の割合を割り當(dāng)てることができます。この屬性は、コンテナ內(nèi)のアイテムに対して設(shè)定され、親コンテナの幅に基づいてその割合を割り當(dāng)てます:
p:nth-child(1){
-webkit-box-flex:1;
box-flex:1;
}p:nth-child(2){
-webkit-box-flex:3;
box-flex:3;
}p:nth-child(3){
-webkit-box-flex:1;
box-flex:1;
}もちろん、一部のアイテムは固定幅を持つことができ、他のアイテムも殘りの幅を割り當(dāng)てます。たとえば、ここの最初の p 要素は固定幅に設(shè)定されています:
p:nth-child(2){
-webkit-box-flex:2;
box-flex:2;
}p:nth-child(3){
-webkit-box-flex:1;
box-flex:1;
}さらに詳しい使い方については、自分でゆっくり試してみてください。
box-ordinal-group 屬性
box-ordinal-group 屬性は、フレックス項(xiàng)目の表示位置を設(shè)定できます。
p:nth-child(1){
-webkit-box-ordinal-group:2;
box-ordinal-group:2;
}p:nth-child(2){
-webkit-box-ordinal-group:3;
box-ordinal-group:3;
}p:nth-child(3){
-webkit-box-ordinal-group:1;
box-ordinal-group:1;
}ご覧のとおり、最初の p 要素は 2 位にランクされ、2 番目の p 要素は 3 位にランクされ、3 番目の p 要素は 1 位にランクされています。この屬性はp要素に対して個(gè)別に設(shè)定でき、他の項(xiàng)目は元の順序で変更されます。
それでは、古いバージョンのすべての屬性を簡単に紹介しました。さらに組み合わせて使用??するには、必要に応じて自分で練習(xí)してください。
水平方向と垂直方向のセンタリングの例を次に示します:
div{
display:-webkit-box;
display:box;
height:500px;
border:1px solid #f00;
-webkit-box-pack:center;
box-pack:center;
-webkit-box-align:center;
box-align:center;
}この時(shí)點(diǎn)で、p 要素に固定の高さを設(shè)定します:
p{
width:150px;
height:200px;
}CSS3 フレキシブル ボックス屬性
次の表は、フレキシブル ボックスで一般的に使用される屬性のリストです:
プロパティ HTML要素ボックスのタイプを指定します。
flex-direction フレックスコンテナ內(nèi)の子要素の配置を指定します
