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: フレックス ボックス要素は行の末尾に向かって配置されます。行の最初の子要素の主端の端は行の主端の端と位置合わせされ、後続のすべてのフレックス項目はその前の項目と位置合わせされます。
<!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: flex-start | flex-end center | 位置の境界は、行の交差軸の開始境界のすぐ隣にあります。 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;
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属性
フレックスボックスオブジェクトの子要素が親コンテナを超えたときにラップするかどうかを設定または取得します。
構文
<!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」と同等です。他の場合は、最初の行の軸交差開始エッジがフレックス コンテナのコンテンツ開始交差エッジに接し、最後の行の軸交差終了エッジがフレックス コンテナのコンテンツ終了交差エッジに接し、残りの行は次のように配置されます。フレックスボックス ウィンドウ間のスペースが等しくなるように配置します。
ストレッチ: 各行は残りのスペースを占めるように伸縮します。残りのスペースが負の場合、この値は「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' の場合、要素の親の 'align-items' 値、または親がない場合は 'stretch' 値として評価されます。
flex-start: フレックスボックス要素の交差軸(縦軸)の開始位置の境界線が、行の交差軸の開始境界線に近いです。
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;
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 ]
[ flex-shrink ]: フレックス ボックス要素の収縮率を定義します。
[ flex-basis ]: フレックス ボックス要素のデフォルトの基準値を定義します。
りー
![フロントエンドプロジェクト-Shangyou [HTML/CSS/JS技術総合演習]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Apipost 実用化 [API、インターフェース、自動テスト、モック]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
