CSS3 フレックスボックス (フレックスボックス)

CSS3 Flex Box

Flex Box は CSS3 の新しいレイアウトモードです。

CSS3 フレキシブルボックス (フレキシブルボックスまたはフレックスボックス) は、ページがさまざまな画面サイズやデバイスの種類に適応する必要がある場合に、要素が適切に動作することを保証するレイアウト方法です。

フレックスボックスレイアウトモデルを導入する目的は、コンテナ内のサブ要素に空のスペースを配置、整列、割り当てるためのより効率的な方法を提供することです。

CSS3 フレキシブルボックスのコンテンツ

フレキシブルボックスは、Flex コンテナと Flex アイテムで構成されます。

フレキシブルコンテナは、display プロパティの値を flex または inline-flex に設定することで、フレキシブルコンテナとして定義されます。

フレキシブルコンテナには 1 つ以上のフレキシブルなサブ要素が含まれます。

注: フレキシブルコンテナの外側とフレキシブル子要素内は通常どおりレンダリングされます。フレックスボックスは、フレックス子要素がフレックスコンテナ内でどのようにレイアウトされるかを定義するだけです。

フレキシブルサブ要素は通常、フレックスボックス内に 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>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>
</body>
</html>

上記の結果は正常ですが、次の例を見てください:

<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>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p>
    <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p>
</div>
</body>
</html>

ほら、すべての p 要素がボックスになりました。これが柔軟なレイアウトの魔法です。

上記では、div要素の表示を旧バージョンのフレキシブルレイアウトであるboxに設定しています。古いバージョンのブラウザの場合は、-webkit- プレフィックスを追加する必要があります。

古いバージョンのエラスティックレイアウトには 2 つの属性値があります:

box: コンテナボックスモデルをブロックレベルのエラスティックボックスとして表示します。 inline-box: コンテナボックスモデルをインラインレベルのエラスティックボックスとして表示します。

PS: know ブロックレベルでは、div 要素などの行全体を占有しますが、インラインレベルでは、span 要素などの行全体を占有しません。しかし、私たちはボックス全体を、誰も占有しないように設定し、一貫性を保ちました。上の例と同様に、div 要素にボックスが設定されている場合、div 要素内の p 要素は占有されません。

box-orient属性

box-orient属性は主にボックス内の要素の流れの方向を実現します。

div{
    display:-webkit-box;
    display:box;
    -webkit-box-orient:vertical;
    box-orient:vertical;
}

この時の結果は縦方向の配置です:

この属性の属性値は次のとおりです:

horizontal: フレキシブルアイテムが左から右に横方向に配置されます。vertical: フレキシブルアイテムが左から右に縦方向に配置されます。上から下へ inline-axis: フレキシブルなアイテムがインライン軸に沿って配置され、表示されます block-axis: フレキシブルなアイテムがブロック軸に沿って配置され、表示されます

試してみると良いでしょう: horizontal 軸と inline-axis は両方とも水平に配置されます。一方、vertical 軸と block axis は両方とも垂直に配置されます。

ボックス方向属性

box-direction 属性は主に、スケーラブルコンテナー内のフロー順序を設定するために使用されます。

div{
    display:-webkit-box;
    display:box;
    -webkit-box-direction:reverse;
    box-direction:reverse;
}

この属性の属性値は次のとおりです:

normal : 通常の順序、デフォルト値 reverse : 逆順

box-pack 属性

box-pack 属性は、スケーラブルなプロジェクトの配布方法に使用されます。

この属性の属性値は次のとおりです:

start : 伸縮アイテムは始点に揃えられます end : 伸縮アイテムは終点に揃えられます center : 伸縮アイテムは中心点に揃えられます 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
;
}

追記: 垂直方向も同様の原理ですが、高さが自動の場合は効果が出ません。したがって、高さには固定の高さを設定する必要があります (デフォルトよりも高いことが望ましい)。このとき、垂直方向の効果が確認できます。ここでは詳細には触れません。

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 プロパティは、浮動小数点数を使用してスケーラブルな項目の割合を割り当てることができます。この属性は、コンテナ内のアイテムに対して設定され、親コンテナの幅に基づいてその割合を割り当てます:

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;
}

もちろん、一部のアイテムは固定幅を持つことができ、他のアイテムも残りの幅を割り当てます。たとえば、ここの最初の p 要素は固定幅に設定されています:

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 属性は、フレックス項目の表示位置を設定できます。

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要素に対して個別に設定でき、他の項目は元の順序で変更されます。

それでは、古いバージョンのすべての属性を簡単に紹介しました。さらに組み合わせて使用するには、必要に応じて自分で練習してください。

水平方向と垂直方向のセンタリングの例を次に示します:

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;
               }

この時点で、p 要素に固定の高さを設定します:

p{
    width:150px;
    height:200px;
}

CSS3 フレキシブルボックス属性

次の表は、フレキシブルボックスで一般的に使用される属性のリストです:

プロパティ HTML要素ボックスのタイプを指定します。

flex-direction フレックスコンテナ内の子要素の配置を指定します

justify-content 主軸（横軸）方向のフレックスボックス要素の配置を設定します。

align-items フレックスボックス要素の横軸（縦軸）方向の配置を設定します。

flex-wrap フレックスボックスの子要素が親コンテナを超えたときにラップするかどうかを設定します。

align-content align-items と同様に、flex-wrap 属性の動作を変更しますが、子要素の配置を設定する代わりに、行の配置を設定します

flex-flowフレキシブルボックスをセットアップする子要素がソートされる順序。

align-self flex 子要素で使用されます。コンテナの align-items プロパティをオーバーライドします。

flex フレックスボックスの子要素がスペースを割り当てる方法を設定します。

学び続ける

新しいファイル

<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>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p> <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划哈萨克的骨灰撒块光辉卡萨很干净啊是高科技傻空给</p> <p>发生过的空间还是看价格哈健康啊水果和卡刷卡更何况规划</p> </div> </body> </html>

提出するリセットコード

自動運転