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

レイアウトは、Web アプリケーションのスタイル設計の非常に重要な部分です。レイアウトは、ページ上のさまざまなコンポーネントや要素のサイズと位置を決定するために使用されます。応答性の高いユーザーインターフェイスの人気により、Web アプリケーションは通常、さまざまなデバイスサイズやブラウザ解像度に適応する必要があります。レスポンシブユーザーインターフェイスデザインの最も重要な側面はレイアウトです。最適な表示効果を実現するには、ウィンドウサイズに応じてレイアウトを調整する必要があり、コンポーネントのサイズと位置を変更します。これにより、レイアウトロジックもより複雑になります。

この記事では、CSS3 仕様で導入された新しいレイアウトモデル、フレックスボックスモデルを紹介します。フレックスボックスモデルは、一般的な複雑なレイアウトの多くのニーズを簡単な方法で満たすことができます。その利点は、開発者が特定の実装方法を指定せずに、レイアウトが持つべき動作を宣言するだけであることです。実際のレイアウトはブラウザーが担当します。このレイアウトモデルは、主要なブラウザでサポートされています。

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

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

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

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

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

フレキシブルサブ要素は通常、フレックスボックス内に 1 行で表示されます。デフォルトでは、コンテナーごとに 1 行のみが存在します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 150px;
    background-color: yellow;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item"> 1</div>
  <div class="flex-item"> 2</div>
  <div class="flex-item"> 3</div>  
</div>
</body>
</html>

flex-directionプロパティ

は、親コンテナ内のフレックスボックスオブジェクトの子要素の位置を設定または取得します。

構文
flex-direction: row | row-reverse column | column-reverse

行: 左から右へ水平に配置 (左揃え)。

row-reverse: 水平方向の配置を反転します (右揃え、後ろから前、最後の項目が前になります。)

column: 垂直方向の配置。

row-reverse: 垂直方向の配置を前から反転します。戻る今後は、最後の項目が一番上になります

ブラウザのサポート

Firefox、Opera、Chrome は flex-direction 属性をサポートします

justify-content 属性

主軸 (水平軸) 方向のフレックスボックス要素の配置を設定または取得します

この属性は、フレックスボックス内の行のすべての子要素を格納できない場合、または最大サイズに達した場合に役立ちます。このプロパティは配置も制御します。要素が行をオーバーフローしたとき。

構文

justify-content: flex-start | flex-end | space-around

: フレックスボックス要素は、行位置合わせ。行の最初の子のメインの開始点のエッジは行のメインの開始点のエッジと位置合わせされ、後続のすべてのフレックス項目はその前の項目と位置合わせされます。

flex-end: フレックスボックス要素は行の末尾に向かって配置されます。行の最初の子要素の主端の端は行の主端の端と位置合わせされ、後続のすべてのフレックス項目はその前の項目と位置合わせされます。

center: フレックスボックス要素は行の中央に配置されます。行の子要素は互いに位置合わせされ、行内の中央に配置されます。最初の要素は、行の主な開始位置から、最後の要素が行の主な終了位置からとるのと同じだけのマージンを持ちます (残りのスペースがある場合)。が負の場合、両端の等しい長さのオーバーフローが維持されます)。

space-between: フレックスボックス要素は行内に均等に分散されます。左端の残りのスペースが負の場合、または行に子が 1 つだけある場合、この値は「flex-start」と同等です。他の場合には、最初の要素のマージンは行のメイン開始マージンと位置合わせされ、最後の要素のマージンは行のメイン終了マージンと位置合わせされ、残りのフレックス項目は均等に分散され、要素間に等しい空白があることを確認してください。二。

スペースアラウンド: フレキシブルボックス要素は行内に均等に配置され、両端のサブ要素間のスペースの半分が残ります。左端の残りのスペースが負の場合、または行にフレックスボックス項目が 1 つだけある場合、この値は「center」と同等です。他の場合では、フレックスボックス項目は均等に配置され、項目間の空白スペースは等しく、最初の要素の前と最後の要素の後のスペースの半分がそれらの間のスペースの半分になります。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
.box{
display:-webkit-flex;
display:flex;
margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box{
-webkit-flex-direction:row;
flex-direction:row;
}
#box2{
-webkit-flex-direction:row-reverse;
flex-direction:row-reverse;
}
#box3{
height:500px;
-webkit-flex-direction:column;
flex-direction:column;
}
#box4{
height:500px;
-webkit-flex-direction:column-reverse;
flex-direction:column-reverse;
}
</style>
</head>
<body>
    <h2>flex-direction:row</h2>
    <ul id="box" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    </ul>
    <h2>flex-direction:row-reverse</h2>
    <ul id="box2" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    </ul>
    <h2>flex-direction:column</h2>
    <ul id="box3" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    </ul>
    <h2>flex-direction:column-reverse</h2>
    <ul id="box4" class="box">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    </ul>
</body>
</html>

align-itemsプロパティ

は、フレックスボックス要素の交差軸(縦軸)方向の配置を設定または取得します。

構文

align-items: flex-start | flex-end center | 位置の境界は、行の交差軸の開始境界のすぐ隣にあります。 flex-end: フレックスボックス要素の交差軸(縦軸)の開始位置の境界が、行の交差軸の終了境界に近いです。

center: フレックスボックス要素は行の交差軸 (垂直軸) の中心に配置されます。 (行のサイズがフレックスボックス要素のサイズより小さい場合、両方向に同じ長さでオーバーフローします)。

baseline: フレックスボックス要素のインライン軸と横軸が同じ場合、この値は 'flex-start' と同等です。それ以外の場合、この値はベースライン調整に参加します。

stretch: 軸の横のサイズを指定する属性値が 'auto' の場合、その値は項目のマージンボックスのサイズを行のサイズにできる限り近づけますが、同時に 'min/' を尊重します。「max-width/height」属性の制限。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
.box{
display:-webkit-flex;
display:flex;
width:400px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
#box{
-webkit-justify-content:flex-start;
justify-content:flex-start;
}
#box2{
-webkit-justify-content:flex-end;
justify-content:flex-end;
}
#box3{
-webkit-justify-content:center;
justify-content:center;
}
#box4{
-webkit-justify-content:space-between;
justify-content:space-between;
}
#box5{
-webkit-justify-content:space-around;
justify-content:space-around;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:space-between</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:space-around</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>

flex-wrap属性

フレックスボックスオブジェクトの子要素が親コンテナを超えたときにラップするかどうかを設定または取得します。

構文

flex-wrap: nowrap Wrap |wrap-reverse

nowrap: 子要素が親コンテナをオーバーフローした場合はラップしません。

wrap: 子要素が親コンテナからオーバーフローした場合に自動的にラップします。

wrap-reverse: ラップの配置を逆にします。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
.box{
display:-webkit-flex;
display:flex;
width:200px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;border-radius:5px;background:#aaa;text-align:center;}
.box li:nth-child(1){padding:10px;}
.box li:nth-child(2){padding:15px 10px;}
.box li:nth-child(3){padding:20px 10px;}
#box{
-webkit-align-items:flex-start;
align-items:flex-start;
}
#box2{
-webkit-align-items:flex-end;
align-items:flex-end;
}
#box3{
-webkit-align-items:center;
align-items:center;
}
#box4{
-webkit-align-items:baseline;
align-items:baseline;
}
#box5{
-webkit-align-items:strecth;
align-items:strecth;
}
</style>
</head>
<body>
<h2>align-items:flex-start</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:baseline</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>align-items:strecth</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>

align-content プロパティ

は、フレックスボックススタックのフレックス行の配置を設定または取得します。

構文

align-content: flex-start | space-around | フレックスボックスの各行コンテナ開始位置は積み重ねられます。フレックスボックスコンテナーの最初の行の交差軸の開始エッジはフレックスボックスコンテナーの交差軸の開始エッジに隣接し、後続の各行は前の行に隣接します。
flex-end: 各行はフレックスボックスコンテナーの終端に向かって積み重ねられます。フレックスボックスコンテナーの最後の行の軸を横切る端の境界は、フレックスボックスコンテナーの軸を横切る端の境界に近く、後続の各行は前の行に近くなります。

center: 各行は、フレックスボックスコンテナーの中央に向かって積み重ねられます。行は 2 つずつ整列され、フレックスコンテナの中心に配置され、フレックスコンテナの軸を横切る開始コンテンツエッジと最初の行の間の距離、およびコンテナの軸を横切る終了コンテンツエッジと最後の行の間の距離が維持されます。距離は等しい。 (残りのスペースが負の場合、行は両方向に等しい距離で広がります。)

space-between: 行はフレックスボックスコンテナー内に均等に分散されます。残りのスペースが負の場合、またはフレックスコンテナーに 1 行しかない場合、この値は「flex-start」と同等です。他の場合は、最初の行の軸交差開始エッジがフレックスコンテナのコンテンツ開始交差エッジに接し、最後の行の軸交差終了エッジがフレックスコンテナのコンテンツ終了交差エッジに接し、残りの行は次のように配置されます。フレックスボックスウィンドウ間のスペースが等しくなるように配置します。

space-around: 各行はフレックスボックスコンテナー内に均等に分散され、両端のサブ要素間のスペースの半分が残ります。残りのスペースが負の場合、またはフレックスボックスコンテナーに 1 行しかない場合、この値は「center」と同等です。他の場合には、行間のスペースが等しく、最初の行の前と最後の行の後のスペースが他の行のスペースの半分になるように、フレックスボックスコンテナ内に行が配置されます。

ストレッチ: 各行は残りのスペースを占めるように伸縮します。残りのスペースが負の場合、この値は「flex-start」と同等です。他の場合には、軸の交差サイズを拡大するために、残りのスペースがすべての行に均等に分割されます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
.box{
display:-webkit-flex;
display:flex;
width:220px;margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box{
-webkit-flex-wrap:nowrap;
flex-wrap:nowrap;
}
#box2{
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
}
#box3{
-webkit-flex-wrap:wrap-reverse;
flex-wrap:wrap-reverse;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-wrap:wrap</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-wrap:wrap-reverse</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>

order プロパティ

は、フレックスボックスモデルオブジェクトの子要素が表示される順序を設定または取得します。

構文

order: <integer>

<integer>: 整数値を使用して並べ替え順序を定義し、小さい値を前に置きます。マイナスになることもあります。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
.box{
display:-webkit-flex;
display:flex;
-webkit-flex-wrap:wrap;
flex-direction:wrap;
width:200px;height:200px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
#box{
-webkit-align-content:flex-start;
align-content:flex-start;
}
#box2{
-webkit-align-content:flex-end;
align-content:flex-end;
}
#box3{
-webkit-align-content:center;
align-content:center;
}
#box4{
-webkit-align-content:space-between;
align-content:space-between;
}
#box5{
-webkit-align-content:space-around;
align-content:space-around;
}
#box6{
-webkit-align-content:strecth;
align-content:strecth;
}
</style>
</head>
<body>
<h2>align-content:flex-start</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:space-between</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:space-around</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:strecth</h2>
<ul id="box6" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
</body>
</html>

align-self属性

は、フレックスボックス要素自体の交差軸(縦軸)方向の配置を設定または取得します。

構文

align-self: auto | flex-end center |stretch

: 'align-self' の値が 'auto' の場合、要素の親の 'align-items' 値、または親がない場合は 'stretch' 値として評価されます。

flex-start: フレックスボックス要素の交差軸(縦軸)の開始位置の境界線が、行の交差軸の開始境界線に近いです。

flex-end: フレックスボックス要素の横軸(縦軸)の開始位置の境界が、行の横軸の終了境界に近いです。

stretch: 軸の横のサイズを指定する属性値が 'auto' の場合、その値は項目のマージンボックスのサイズを行のサイズにできる限り近づけますが、同時に次の条件に準拠します。「min/max-width/height」属性の制限。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php.cn</title> 
<style>
.box{
display:-webkit-flex;
display:flex;
margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box li:nth-child(3){
-webkit-order:-1;
order:-1;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</body>
</html>

フレックスプロパティ

複合プロパティ。フレックスボックスオブジェクトの子要素がスペースを割り当てる方法を設定または取得します。

省略形 flex:1 の場合、その計算値は次のようになります: 1 1 0

flex: none || [ flex-grow ] || [ flex - based ]

none: none キーワードの計算値は次のとおりです: 0 0 auto

[ flex-grow ]: フレックスボックス要素の拡張率を定義します。

[ flex-shrink ]: フレックスボックス要素の収縮率を定義します。

[ flex-basis ]: フレックスボックス要素のデフォルトの基準値を定義します。

りー

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php.cn</title> <style> .box{ display:-webkit-flex; display:flex; margin:0;padding:10px;list-style:none;background-color:#eee;} .box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;} #box{ -webkit-flex-direction:row; flex-direction:row; } #box2{ -webkit-flex-direction:row-reverse; flex-direction:row-reverse; } #box3{ height:500px; -webkit-flex-direction:column; flex-direction:column; } #box4{ height:500px; -webkit-flex-direction:column-reverse; flex-direction:column-reverse; } </style> </head> <body> <h2>flex-direction:row</h2> <ul id="box" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> <h2>flex-direction:row-reverse</h2> <ul id="box2" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> <h2>flex-direction:column</h2> <ul id="box3" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> <h2>flex-direction:column-reverse</h2> <ul id="box4" class="box"> <li>a</li> <li>b</li> <li>c</li> </ul> </body> </html>

リセットコード

自動運転

提出する

プレビュー Clear