CSS3 フレキシブルボックス フレキシブルボックス_html/css_WEB-ITnose

これはモバイル側で非常に実用的な新しいレイアウトです。IE はこのレイアウトとあまり互換性がありません。ブラウザーのプレフィックスを追加する必要があります。

まず、このレイアウトの特徴について説明します。

1) モバイル端末の画面幅は異なるため、レイアウト時に適応させるために、パーセンテージを使用する場合は計算する必要があります。

2) 複数の列がある場合、以前はすべての列の高さを同じにする必要がありました。高さをサポートするために、さまざまな計算を使用するか、サブ要素を使用する必要がありました。

3) 上部と下部を中央揃えにする 以前の場合は、行の高さまたは上部の絶対位置を使用して計算します。

4) フォームをレイアウトする際、左右が同一線上にあることがよくありました。以前はfloatやpositionを設定していました。margin-leftで結合したレイアウトです。

5) Web。ページには、連絡先情報やリンクなどを配置するための下部が必要になることがあります。この下部は、たとえ中央にコンテンツがない場合でも、常に最下部にある必要があります。以前は、それを上に移動しないでください。中レベル、高レベル

そして、フレキシブル ボックスのいくつかの属性を使用して、上記の難しいアクションを完了できるようになりました。

1. 新旧の構文

1) いくつかの基本概念

1. フレックス コンテナー (フレキシブル コンテナー)、主に表示をフレックスに設定しますまたは - webkit-flex の場合、このコンテナ内の子要素は柔軟になります。

2. flex アイテム (弾性サブ要素)。サイズは通常の幅または高さによって設定するか、または高度な flex 属性を使用して割り当てられたスペースをカスタマイズすることによって設定できます。

3. 主軸 (主軸または水平軸) および交差軸 (側軸または垂直軸)。属性 flex-direction、justify-content、align-items、および align-self が方向を制御します。軸または位置合わせの。

4. flex-wrap 属性は、柔軟なサブ要素の行の折り返しを制御できます。

5. order 属性があり、整数値を使用して並べ替え順序を定義し、小さい値が最初にリストされます。

2) 新旧属性の比較

旧语法	新语法

古い構文

新しい構文

旧バージョンの部分属性互換性:

新バージョンにおける一部の属性の互換性:

3) 新旧属性の対応

旧属性	新属性	定义或对比
box-orient box-direction	flex-direction	box-orient:horizontal + box-direction:normal = flex-direction:row box-orient:horizontal + box-direction:reverse = flex-direction:row-reverse box-orient:vertical + box-direction:normal = flex-direction:column box-orient:horizontal + box-direction:reverse = flex-direction:column-reverse
box-flex	flex	flex有3个子属性，而box-flex只能设置一个数字
box-align	align-items align-content	下面会分析align-items和align-content的区别
box-pack	justify-content	效果相同
box-ordinal-group	order	效果相同
box-lines （实验属性）	flex-wrap	效果相同（Android的UC和微信浏览器没有换行效果）
box-flex-group		设置或检索伸缩盒对象的子元素的所属组
	flex-grow	flex子属性，设置或检索弹性盒的扩展比率
	flex-shrink	flex子属性，设置或检索弹性盒的收缩比率
	flex-basis	flex子属性，设置或检索弹性盒伸缩基准值
	flex-flow	flex-direction与flex-wrap的复合属性，设置或检索弹性盒模型对象的子元素排列方式
	align-self	定义flex子项单独在侧轴（纵轴）方向上的对齐方式

古い属性	新しいプロパティ	定義または比較
ボックス方向 ボックス方向	フレックス方向	ボックス方向:水平 + ボックス方向:標準 = フレックス方向:行 ボックス方向:水平 + ボックス方向:逆 = フレックス方向:行逆 ボックス方向:垂直 + ボックス方向:標準 = フレックス方向:列 box-orient:horizo​​ntal + box-direction :reverse = flex-direction:column-reverse
box-flex	flex	flex には 3 つのサブプロパティがありますが、box-flex は数値のみを設定できます
box-align	align-items align-content	align-items と align-content の違いは以下で分析されます
ボックスパック	justify-content	同じ効果
box-ordinal-group	order	同じ効果
box-lines (実験的プロパティ)	flex-wrap	効果は同じです (Android の UC ブラウザと WeChat ブラウザには行の折り返しがありません)効果)
box-flex-group		の子要素が属するグループを設定または取得します。フレックス ボックス オブジェクトが属する
flex-grow	flex サブプロパティ。フレックス ボックスの拡張率
	flex-shrink	flex サブプロパティ、フレックス ボックスの収縮率を設定または取得します。
	flex-basis	flex sub -property、フレックス ボックスのスケーリング ベースライン値を設定または取得します。
	flex-flow	flex-direction と flex-wrap の複合プロパティ。フレックス ボックス モデル オブジェクトのサブ要素の配置を設定または取得します。
	align-self	フレックス項目の横軸（縦軸）方向の配置を個別に定義 td>

4) align-content と align-items の違い

まず下の比較図をご覧ください。 align-content が左側、align-items が右側です (オンライン コードの場合、ここをクリックして Chrome で開いてください)

align-content は複数行ある場合にのみ効果を持ちます。 1 行しかない場合は効果がありません。効果を見てください。この属性は、主軸に揃えられた justify-content 属性に似ています (Android 上の UC および WeChat ブラウザでは、フレックスラップ効果が表示されません)

align-items 複数の行がある場合、2 つの列は次のようになります。全体としては扱われませんが、一行にすると非常にうまく機能します。 align-self は、親の align-items の効果を変更します。

5) サブ要素空間の計算方法

新しい構文フレックス (flex-grow 拡張率、flex-shrink 縮小率、flex-basis 開始値を含む)。 2 つの状況があります:

1. コンテナーの幅 > 子要素の幅の合計。オンラインのソース コードを表示します。

コンテナの幅は 500px に設定され、flex-basis 子要素の開始幅はそれぞれ 50px、80px、100px です。

.flex li:nth-child(1) {  flex: 1 1 50px;  background:red;}.flex li:nth-child(2) {  flex: 2 2 80px;  background:blue;}.flex li:nth-child(3) {  flex: 3 3 100px;  background:black;}

まず残りのスペースを 270px として計算し、flex-grow を使用して計算します。

最终宽度 = flex-grow / flex-grow总和 * 剩余空间 + flex-basis

子要素 1 = (1 / (1+2+3)) * 270 + 50= 95

子要素 2 = (2 / (1+2+3) ) * 270 + 80= 170

子要素 3 = (3 / (1+2+3)) * 270 + 100= 235

2. コンテナの幅< 子要素の幅の合計。オンラインのソース コードを参照してください。

コンテナの幅は 110px に設定され、子要素の flex-basis 属性は上記と同じです。

最初に 120px のオーバーフロー値を計算し、次に縮小率に基づいて合計の縮小率 1*50 + 2*80 + 3*100 = 510px を計算します。

最终宽度 ≈ flex-basis - (收缩比率 * flex-basis) / 收缩总和 * 溢出值

サブ要素 1 = 50 - (1*50 / 510) * 120 ≈ 38.23

サブ要素 2 = 80 - (2*80 / 510) * 120 ≈ 42.35

サブ要素 3 = 100 - (3*100 / 510) * 120 ≈ 29.40

3. 実用化

1) 単純なグリッドシステム

bootstrap2.3.2 にはグリッド システムがあり、パーセンテージまたはピクセルを float と組み合わせてグリッド効果を生成します。応答性が高く、300 行を超える CSS コードが必要です。

Flex レイアウトは本質的に応答性が高いため、多くのコードを節約できます。オンライン コードを確認してください。

2) 複数の列の高さが等しい問題

海外では「Holy Grail Layout」と呼ばれる高尚な名前です。たくさんのコンテンツ。

高さを等しくするためのテクニックはたくさんあります。「等高さの列レイアウトを作成する 8 つの方法」を参照してください。どの方法を使用しても、一部のコードには利点と欠点があります。それを実装するために必要です。

フレックス レイアウトの場合は、display=flex を設定し、各サブ要素のスペースを設定します。これらの高さは自動的に同じに調整されます。オンライン ソース コードを参照してください。

3) 絶対的な最下位

Web ページでは、フレンドリー リンクなど、最下位の列を常に掲載する必要がある場合があります。コンテンツが崩れてしまいます。

下の図では、コンテンツがない場合に表示されます。コンテンツ領域でデフォルトの高さを設定できますが、正確に計算しないと、下端が画面の下端に正確に貼り付けられません。

外国人はこれを「Sticky Footer」と呼んでいます

フレックスレイアウトでは、フレックス方向:列方向を設定し、コンテナの高さを次のように設定するだけです。画面と同じかそれ以上の値を指定すると、一番下の子要素が常に一番下に付加されます。

オンラインでコードを表示します。詳細については、「Flexbox による解決」を参照してください。Github アドレスはここにあります。参照用の flexbugs もあります。

4. 注

1) 複数列レイアウトの column-* 属性は、伸縮性のあるサブ要素には無効です。これも伸縮性のあるレイアウトの一種ですが、効果的なシナリオは次のとおりです。比較的単純な

たとえば、ウォーターフォール フォト ウォール (下の図を参照) では、柔軟性が必要なコンテンツは 1 つの img タグだけです

2) Flex レイアウトが高さを等しくできるシーン (下の図に示す) ですが、::after を使用してフックを設定すると、::after コンテンツの高さがまだオリジナルのままであるように見え、結果として位置ずれが発生します。

ここをクリックすると、具体的なコンテンツが表示されます。

3) float および clear は、elastic 子要素には無効です。

4) 柔軟なサブ要素の配置には垂直方向の配置は無効です

参考:

CSS フレックス ボックスの使用

フレックス レイアウトのチュートリアル: 文法

css3 フレックス フロー アダプティブ レスポンシブ レイアウト スタイル クラス

Flexbox - 高速レイアウト アーティファクト

Flexbox のブラウザ間互換性バグを解決

Flexbox レイアウトの互換性 性別