English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
CSS3 flexible Boxまたはflexboxは、より柔軟なユーザーインターフェースデザインを作成するために使用される新しいレイアウトモデルです。
Flexible box、通常flexboxと呼ばれるCSS3CSSに導入された新しいレイアウトモデルで、パーセンテージや固定長の値を使用せずに、多行多列の柔軟なユーザーインターフェースデザインを作成するために使用されます。3 flexレイアウトモデルは、スタイルシートを通じてスペースの分布と内容のアライメントを自動的に処理し、実際のマークアップに影響を与えずに、シンプルかつ強力なメカニズムを提供します。
以下の例では、flexレイアウトモデルを使用して三列レイアウトを作成する方法を示しています。各列の幅と高さはすべて等しく設定されています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 Three Equal Flex Column</title>
<style>
.flex-container {
width: 80%;
min-height: 300px;
display: -webkit-flex; /* Safari */
display: flex;
border: 1px solid #808080;
}
.flex-container div {
background: #dbdfe5;
-webkit-flex: 1; /* Safari */
-ms-flex: 1; /* IE 10 */
flex: 1;
}
</style>
</head>Item 1Item 2Item 3</html>テストをしてみて‹/›上記のサンプルコードを注意深く見ると、.flex-containerの内部<div>上記のサンプルコードを注意深く見ると、.flex-containerの内部
Flexレイアウトの動作方法FlexboxはFlexコンテナとFlex項目で構成されています。以下のようにFlexコンテナを指定することで、Flexレイアウトの動作を制御できます。display要素の属性がflexに設定されると（flexコンテナに似た） ブロック-flex（flexコンテナに似た）やinlineinline-blockのインラインFlexコンテナ（flexコンテナ）を使用してFlexコンテナを作成します。flexコンテナのすべての子要素は自動的にflex項目になり、flexレイアウトモデルを使用してレイアウトされます。float、clearとvertical-alignこれにより、伸縮性のあるプロジェクトに影響を与えません。
伸縮項がその方向に沿って伸縮します。flex-direction属性で指定された伸縮線は、伸縮コンテナ内に位置します。デフォルトでは、各flexコンテナには1本の伸縮線しかなく、現在の書き込みモードのインライン軸またはテキスト方向と同じ。以下の図は、Flexレイアウトの用語を理解するのに役立ちます。
標準のCSSフレームワークでは、要素は通常、底層のHTMLマークアップの中で現れる順序に表示されます。Flexレイアウトは、Flexコンテナ内の流れの方向を制御し、要素が左、右、下、または上のどの流れ方向でもレイアウトできるようにします。
次を使用できます。flex-direction属性はflexコンテナ内のflex項目の流れを指定します。この属性のデフォルト値rowは、文書の現在の書き方またはテキスト方向と同じです。例えば、英語は左から右です。
.flex-container {
width: 80%;
min-height: 300px;
/* Safari */
display: -webkit-flex;
-webkit-flex-direction: row-reverse;
display: flex;
flex-direction: row-reverse;
border: 1px solid #666;
}テストをしてみて‹/›同様に、エラストックコンテナ内で列形式でエラストック項を表示することもできますが、flexを使用する必要はありません。-direction属性の値は列行として示され、以下のようになります：
.flex-container {
width: 80%;
min-height: 300px;
/* Safari */
display: -webkit-flex;
-webkit-flex-direction: column;
display: flex;
flex-direction: column;
}テストをしてみて‹/›エラストックレイアウトの最も重要な側面は、エラストックプロジェクトが利用可能なスペースを埋めるためにその幅または高さを変更する能力です。これは以下で実現されます。flex属性で実現されています。これは省略形の属性です。flex-grow、flex-shrinkそしてflex-basis属性。
エラストックコンテナは、利用可能なスペースをエラストック成長因子と比例してプロジェクトに配分し、または溢れを防ぐためにそれらを収縮します。収縮率は曲げ収縮係数と比例します。
.flex-container {
width: 80%;
min-height: 300px;
display: -webkit-flex; /* Safari */
display: flex;
}
.flex-container div {
padding: 10px;
background: #dbdfe5;
}
.item1, .item3 {
-webkit-flex: 1; /* Safari */
flex: 1;
}
.item2 {
-webkit-flex: 2; /* Safari */
flex: 2;
}テストをしてみて‹/›上記の例では、最初と第3のエラストアイテムが占める1/4、つまり1/(1+1+2の自由スペース、そして次のエラストアイテムが占める1/2、つまり2/(1+1+2の自由スペース。同様に、このシンプルな技術を使用して、他の柔軟なレイアウトを作成できます。
注意：ショートカット属性を使用することを強く推奨します。なぜなら、指定されていないコンポーネントを正しくリセットできるからです。
属性が4つあります。justify-content、align-content、align-itemsとalign-selfその目的は、エラストコンテナ内のエラストアイテムのアライメントを指定することです。最初の3つはflexコンテナに適用され、最後の1つは単一のflexアイテムに適用されます。
を使用して-content属性は、エラストアイテムをエラストコンテナの主軸（水平方向）に沿ってアライメントできます。通常、エラストアイテムが主軸上のすべての利用可能なスペースを使用していない場合に使用されます。
justify-content属性は以下の値を受け入れます：
flex-スタート-デフォルト値。エラストアイテムは主軸の始点に配置されます。
flex-エンド -Flexアイテムは主軸の端に位置します。
センター - Flexのアイテムは主軸上に配置され、両端に等しい自由スペースがあります。もし残りの自由スペースが負の値であれば、エラストアイテムは両方向に均等にオーバーフローします。
スペース-ビートウィーン -のFlexアイテムは主軸上に沿って均等に配置されます。最初のアイテムは主始点に配置され、最後のアイテムは主端に配置されます。もしアイテムが溢れる場合やアイテムが一つだけの場合、この値はflexになります。-start。
スペース-アラウンド -Flexアイテムは両端に半分のサイズのスペースで均等に分布します。もし溢れる場合やアイテムが一つだけの場合、この値はcenterになります。
以下の例では、異なるjustify-content属性値が固定幅の多列flexコンテナに与える影響。
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solid #666;
/* Safari */
display: -webkit-flex;
-webkit-justify-content: space-around;
display: flex;
justify-content: space-around;
}
.item1 {
width: 75px;
background: #e84d51;
}
.item2 {
width: 125px;
background: #7ed636;
}
.item3 {
width: 175px;
background: #2f97ff;
}テストをしてみて‹/›を使用できます。-itemsまたはalign-self属性はFlexコンテナの横軸（垂直方向）に沿ってFlexアイテムをアライメントします。しかし、align-itemsがflexコンテナに適用されると、このalign-self属性は単一のflexアイテムに適用され、alignをオーバーライドします。-アイテム。これらの属性は以下の値を受け入れます：
flex-スタート — Flexアイテムは交差軸の始点に位置します。
flex-エンド — Flexアイテムは交差軸の端に位置します。
センター —エラストアイテムは横軸の中心に配置され、両端には等しい利用可能なスペースがあります。残りの自由スペースが負の値であれば、即座にアイテムが両方向に均等にオーバーフローします。
ベースライン —各エラストアイテムのテキストベース（またはインラインオックス）は、最大のエラストアイテムのベースラインに一致します。font-sizesize
Stretch 。-—伸縮プロジェクトは、最小および最大幅または高さで阻止される場合を除き、現在の行や列を満たすために伸びます。
以下の例では、異なるalign-items属性のデフォルト値。
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solid #666;
/* Safari */
display: -webkit-flex;
-webkit-align-items属性の値が固定高さを持つフレックスコンテナに与える影響
display: flex;
align-items属性の値が固定高さを持つフレックスコンテナに与える影響
}
.item1 {
width: 75px;
height: 100px;
background: #e84d51;
}
.item2 {
width: 125px;
height: 200px;
background: #7ed636;
}
.item3 {
width: 175px;
height: 150px;
background: #2f97ff;
}テストをしてみて‹/›items: center;-您还可以在多行或多列flex容器的横轴上分配可用空间。该属性align-contentを使用して、フレックスコンテナの行を整列します。例えば、横軸に余分なスペースがある場合、多行のフレックスコンテナの行をjustify
align contentと、単一のプロジェクトを主軸に整列するのと似ています。-content属性は、justify-contentに適用されますが、横軸ではなく主軸に適用されます。また、別の値として：
Stretch利用可能なスペースは、すべての行や列間で平均に分配され、交差サイズを増やします。もし残りの自由スペースが負の場合、この値はflex-start。
以下の例では、異なるalign-content属性の値が固定高さを持つフレックスコンテナに与える影響
.flex-container {
width: 500px;
min-height: 300px;
margin: 0 auto;
font-size: 32px;
border: 1px solid #666;
/* Safari */
display: -webkit-flex;
-webkit-flex-flow: row wrap;
-webkit-align-content: space-around;
display: flex;
flex-flow: row wrap;
align-content: space-around;
}
.flex-container div {
width: 150px;
height: 100px;
background: #dbdfe5;
}テストをしてみて‹/›フレックスコンテナ内の流れを変更する以外に、order属性は、単一のフレックス項の順序を表示します。この属性は、正の整数または負の整数を値として受け入れます。デフォルトでは、すべてのフレックス項はHTMLマークアップ内で現れる順序に従って表示およびレイアウトされますが、orderのデフォルト値は0です。
以下の例では、単一のエラストイックプロジェクトの順序を指定する方法を説明します
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solid #666;
display: -webkit-flex; /* Safari 6.1+ */
display: flex;
}
.flex-container div {
padding: 10px;
width: 130px;
}
.item1 {
background: #e84d51;
-webkit-order: 2; /* Safari 6.1+ */
order: 2;
}
.item2 {
background: #7ed636;
-webkit-order: 1; /* Safari 6.1+ */
order: 1;
}
.item3 {
background: #2f97ff;
-webkit-order: -1; /* Safari 6.1+ */
order: -1;
}テストをしてみて‹/›注意：最低の階値を持つプロジェクトが最前面に配置され、最高の階値を持つプロジェクトが最後に配置されます。階値が同じプロジェクトは、ソースドキュメント内で現れる順序に従って表示されます。
通常、コンテンツブロックの垂直整列にはJavaScriptや簡単なCSS技術を使用します。しかし、フレックスボックスを使用すると、何も調整せずに簡単に行えます。
以下の例では、CSSの使用方法を説明します3フレックスボックス機能は、中間でコンテンツブロックを垂直および水平に簡単に整列する。
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solid #666;
display: -webkit-flex; /* Safari 6.1+ */
display: flex;
}
.item {
width: 300px;
padding: 25px;
margin: auto;
background: #f0e68c;
}テストをしてみて‹/›デフォルトでは、フレックスコンテナはフレックスアイテムの単一行または単一列のみを表示します。しかしflex-wrap伸縮行に十分なスペースがない場合、フレックスコンテナの属性を使用して、伸縮アイテムが複数行に換行されるかどうかを指定できます。
このflex-wrap属性は以下の値を受け入れます：
nowrap-デフォルト値。伸縮アイテムは一行に配置されます。伸縮線に十分なスペースがない場合、オーバーフローが発生する可能性があります。
wrap —フレックスコンテナはフレックスアイテムを複数行に分解し、テキストが現在の行に収まらない場合に新しい行に分解されるようにします。
wrap-reverse —伸縮アイテムは必要に応じて行間に换行し、逆の順序で配置されます。交差点起点(cross-start)と交差点終端(cross-end)方向が逆転します。
以下の例では、フレックスを使用する方法を説明します。-wrap属性は、フレックスコンテナ内の一行または複数行でフレックスアイテムを表示します。
.flex-container {
width: 500px;
min-height: 300px;
border: 1px solid #666;
/* Safari */
display: -webkit-flex;
-webkit-flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
}
.flex-container div{
width: 130px;
padding: 10px;
background: #dbdfe5;
}テストをしてみて‹/›注意：単一の宣言で簡略化されたCSS属性を使用することもできます。flex-flowflexの設定-directionとflex-wrap。各属性と同じ値を受け入れ、値は任意の順序で指定できます。