フレックス レイアウトの経験 1 回
従来のレイアウトとフレックス レイアウト:
| 伝統的なレイアウト | フレックスエラスティックレイアウト |
|---|---|
| 良い互換性 | 簡単操作、極めてシンプルなレイアウト、幅広いモバイルアプリケーション |
| 面倒なレイアウト | PCブラウザのサポートが貧弱 |
| 制限、モバイル側に適切なレイアウトがない | IE 11 以下、サポートなし、または部分的サポートのみ |
2フレックスレイアウトの原則
flex は、flexible Box の略語で、「柔軟なレイアウト」を意味します。これは、ボックス モデルに最大限の柔軟性を提供するために使用され、任意のコンテナーを flex レイアウトとして指定できます。
- 親ボックスにフレックスレイアウトを設定すると、子要素の
float、clear、属性はvertical-align無効になります。 - フレックス レイアウト = フレックス レイアウト = フレックス ボックス レイアウト = フレックス ボックス クロス = フレックス レイアウト
Flex レイアウトを採用する要素は、 フレックス コンテナ、または略して「コンテナ」と呼ばれます。そのすべての子要素は自動的にコンテナ メンバーになり、 フレックス アイテム(フレックス アイテム) と呼ばれ、「アイテム」と呼ばれます。
- Flex アイテム自体も、サブコンテナと呼ばれるコンテナになることができます。そして、上位レベルは親コンテナと呼ばれます
- サブコンテナは水平または垂直に配置可能
- 原理の概要:親ボックスにフレックス属性を追加して、子ボックスの位置と配置を制御する
フレックス レイアウトの親の 3 つの共通属性
3.1 共通の親属性
親要素には以下の6つの属性が設定されます
flex-direction：軸方向を設定しますjustify-content: 主軸上の子要素の配置を設定しますflex-wrap: 子要素を折り返すかどうかを設定しますalign-content：交差軸上の子要素の配置を設定します（複数行）align-items：十字軸（単線）上の子要素の配置を設定します。flex-flowflex-direction: 複合属性。設定と 同等です。flex-wrap
3.2 flex-direction 主軸の方向を設定します
flex-direction 主軸の方向を設定します。
メインシャフトとサイドシャフト
フレックスレイアウトでは主軸と横軸の2方向に分かれており、同時に行と列、x軸とy軸という名称になります。
- デフォルトの軸方向は、右に水平な x 軸方向です。
- デフォルトの横軸方向は y 軸方向、垂直下向きです。
属性値
flex-direction 属性は主軸の方向 (つまり、アイテムが配置される方向) を決定します
。 注: 主軸と副軸は、 flex-direction どちらを主軸に設定するかによって変わります。もう一方がサイドになります。軸。子要素は主軸に沿って配置されます
| 属性値 | 説明する |
|---|---|
| 行 | デフォルト、左から右へ |
| 行反転 | 右から左へ |
| 桁 | 上から下へ |
| 列反転 | 一気飲み |
justify-content主軸上のサブ要素の配置を設定します
- この属性を使用する前に、どの軸がどの軸であるかを必ず決定してください。
| 属性値 | 説明する |
|---|---|
| フレックススタート | デフォルト値。頭から開始し、主軸が X 軸の場合は左から右に進みます。 |
| フレックスエンド | 端から並べ替える |
| 中心 | 主軸を揃えます (主軸が x の場合、水平方向の中央に配置されます) |
| 周囲の空間 | 残りのスペースを均等に分割します |
| 間のスペース | まず両側に貼り付けてから、残りのスペースを均等に分割します（重要） |
flex-wrap子要素を折り返すかどうかを設定します
デフォルトでは、項目は 1 行 (別名軸) 上に配置されます。
flex-wrap 属性定義、フレックスレイアウトのデフォルトは改行ではありません
- 注: 親ボックスを 1 行で開くことができない場合は、子要素の幅が縮小されて 1 行で表示されます。
| 属性値 | 説明する |
|---|---|
| ナラップ | デフォルト、改行なし |
| 包む | 改行 |
| ラップリバース | 逆改行 |
align-items交差軸(単線)上の子要素の配置を設定します。
このプロパティは、横軸 (デフォルトでは Y 軸) 上のサブ項目の配置を制御し、サブ項目が単一の項目である場合に使用されます。
| 属性値 | 説明する |
|---|---|
| フレックススタート | 上から下へ |
| フレックスエンド | 一気飲み |
| 中心 | 一緒に絞ります（垂直中央） |
| ストレッチ | ストレッチ (デフォルト) |
align-content交差軸上の子要素の配置を設定します（マルチライン）
横軸上のサブ項目の配置を設定します。 サブ項目が新しい行 (複数行) に表示される場合にのみ使用できます。単一行では効果がありません。
| 属性値 | 説明する |
|---|---|
| フレックス | デフォルトでは、交差軸の先頭から位置合わせを開始します。 |
| フレックスエンド | 交差軸の端から位置合わせを開始します |
| 中心 | 横軸の中央に表示 |
| 周囲の空間 | 子供たちは残りのスペースを十字軸上で均等に分割します |
| 間のスペース | 子項目はまず横軸の両端に配置され、残りのスペースを均等に分割します。 |
| ストレッチ | 親要素の高さを任意に分割する子要素の高さを設定します |
align-content と align-items の違い
align-items単一行の場合、上下揃え、センタリング、ストレッチのみに適用可能align-content改行（複数行）の場合 に適用 （単行の場合は無効）、上揃え、下揃え、中央揃え、引き伸ばし、残りのスペースの均等分割などの属性値を設定できます
フレックスフロー
flex-flowflex-direction 属性はと flex-wrap 属性の複合属性 です
flex-flow: row wrap;flex-direction：軸方向を設定しますjustify-container: 主軸上の子要素の配置を設定しますflex-wrap: 子要素を折り返すかどうかを設定しますalign-content：交差軸上の子要素の配置を設定します（複数行）align-items：十字軸（単線）上の子要素の配置を設定します。flex-flowflex-direction: 複合属性。設定と 同等です。flow-wrap
フレックス レイアウトの子の 4 つの共通属性
- フレックスアイテムのシェア
- align-self は、交差軸上の子自体の配置を制御します。
- order 属性は、サブアイテムが配置される順序 (前後) を定義します。
flexこの属性は、残りのスペースを割り当てる サブアイテムを定義します 。これは、flexそれが占めるコピーの数を示すために使用されます。flex値は整数またはパーセンテージにすることができます
.item {
flex: <number>; /*default 0*/
}- たとえば、ボックスを均等に分割するには、サブ要素の幅 (高さ) を指定せず、各サブ要素に属性を設定します。
flex: 1
align-self子が交差軸上にどのように配置されるかを制御します
align-self 属性を使用すると、個々のアイテムに他のアイテムとは異なる配置を設定し、 align-items 属性をオーバーライドできます。デフォルト値は です auto。これは、 align-items 親要素の属性を継承することを意味し、親要素がない場合は と同等です strech。
| 属性値 | 説明 |
|---|---|
auto |
デフォルト値は、親ボックスの align-items 値を継承します。 |
strech |
要素はコンテナに合わせて引き伸ばされます。 |
center |
要素はコンテナの中心にあります |
flex-start |
コンテナの先頭の要素 |
flex-end |
要素はコンテナの最後にあります |
orderプロパティは項目を並べ替える順序を定義します
値が小さいほど配置が高くなります。デフォルトは 0
- 注:
z-indexと同じではありません
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
display: flex;
width: 80%;
height: 300px;
background-color: pink;
/* 让三个子盒子沿着侧轴底侧对齐 */
/* align-items: flex-end; */
/* 我们想只让3号盒子下来底侧 */
}
div span {
width: 150px;
height: 100px;
background-color: purple;
margin-right: 5px;
}
div span:nth-child(2) {
/* 默认是0 -1比0小所以在前面 */
order: -1;
}
div span:nth-child(3) {
align-self: flex-end;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
5色のグラデーション
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 600px;
height: 200px;
/* 背景渐变必须添加浏览器私有前缀 */
/* background: -webkit-linear-gradient(left, red, blue); */
/* background: -webkit-linear-gradient(red, blue); */
background: -webkit-linear-gradient(top left, red, blue);
}
</style>
</head>
<body>
<div></div>
</body>