Flexレイアウト文法ノート
Webレイアウト(layout)はCSSの重点アプリケーションです.レイアウトの従来のソリューションは、displayプロパティ+positionプロパティ+floatプロパティに依存するボックスモデルに基づいています.それはそれらの特殊な配置にとって非常に不便で、例えば万悪の垂直中心です.
2009年、W 3 Cは新しい方案---Filexレイアウトを提出し、簡便、完全、応答式に各種ページレイアウトを実現することができる.現在、すべてのブラウザでサポートされています.これは、この機能を安全に使用できることを意味します.(ie 10+はflexレイアウトをサポートしており、私の現在のプロジェクトではcorsを使用してドメイン間を解決しているので、ieのサポートもie 10+、完璧に一致しています)
口では支持を言っていますが、ieは私たちを失望させません.flexのieの下のバグと解決方法は、自分で取る必要があります.
FlexはFlexible Boxの略で、「フレキシブルレイアウト」を意味し、ボックスモデルに最大の柔軟性を提供します.いずれのコンテナもFlexレイアウトとして指定できます.
ライン内要素はFlexレイアウトも使用できます.
Webkitカーネルのブラウザには、-webkit接頭辞を付ける必要があります.もちろん、無敵のautoprefixerも使っていれば、そうする必要はありません.
もう1つ注意したいのは、Flexレイアウトに設定すると、サブ要素のfloat、clear、vertical-alignプロパティが無効になります.
Flexレイアウトを採用した要素は、Flexコンテナ(flex container)と呼ばれ、略称は「コンテナ」である.すべてのサブエレメントが自動的にコンテナメンバーとなり、Flexプロジェクト(flex item)、略称「プロジェクト」と呼ばれます.コンテナのデフォルトでは、水平の主軸(main axis)と垂直の交差軸(cross axis)の2本の軸があります.主軸の開始位置(枠との交差点)をmain start、終了位置をmain endと言います.交差軸の開始位置をcross start,終了位置をcross endと呼ぶ.プロジェクトの既定値は、スピンドルに沿って配置されます.単一項目が占める主軸空間をmain size,占有する交差軸空間をcross sizeと呼ぶ.
コンテナで設定できる属性は、以下の6つです. flex-direction flex-wrap flex-flow justify-content align-items align-content
flex-directionプロパティは、主軸の方向(すなわち、項目の配列方向)を決定します.
この属性の4つの値は、それぞれ次のとおりです. row(デフォルト):主軸は水平方向で、始点は左端です. row-reverse:主軸は水平方向で、起点は右端にあります. column:主軸は垂直方向で、起点は上に沿っています. column-reverse:主軸は垂直方向で、起点は下に沿っています.
既定では、プロジェクトは1本の線(軸線とも呼ばれる)に並んでいます.flex-wrapプロパティは、1つの軸線が並べられない場合に、どのように改行するかを定義します.
この属性の3つの値は、それぞれ次のとおりです. nowrap(デフォルト):改行しません. wrap:改行し、最初の行は上にあります. wrap-reverse:改行し、最初の行は下にあります.
flex-flowプロパティはflex-directionプロパティとflex-wrapプロパティの略記形式で、デフォルト値はrow nowrapです.
justify-contentプロパティは、主軸上のアイテムの位置合わせを定義します.
このアトリビュートの6つの値は、それぞれ(具体的な位置合わせは軸の方向に関係します.以下、主軸を左から右に仮定します). flex-start(デフォルト):左揃え flex-end:右揃え center:中央 space-between:両端が揃えられ、プロジェクト間の間隔が等しい. space-around:各項目の両側の間隔が等しい.したがって、プロジェクト間の間隔は、プロジェクトと枠線の間隔の2倍になります. space-evenly:各項目の前の間隔とエッジまでの間隔が等しい
align-itemsプロパティは、交差軸上でアイテムがどのように整列するかを定義します.
このアトリビュートの5つの値は、それぞれ表示されます(具体的な位置合わせは、交差軸の方向に関係します.次に、交差軸を上から下に設定します). flex-start:交差軸の始点位置合わせ. flex-end:交差軸の終点位置合わせ. center:交差軸の中点を揃えます. baseline:プロジェクトの最初の行のテキストのベースラインの位置合わせ. stretch(デフォルト):プロジェクトに高さが設定されていない場合、またはautoに設定されている場合、コンテナ全体の高さが満たされます.
align-contentプロパティは、複数の軸の位置合わせを定義します.アイテムに軸が1本しかない場合は、このアトリビュートは機能しません.
この属性の6つの値は、それぞれ次のとおりです. flex-start:交差軸の始点に位置合わせします. flex-end:交差軸の終点に位置合わせします. center:交差軸の中点に位置合わせします. space-between:交差軸の両端に整列し、軸線間の間隔が平均的に分布する. space-around:各軸線の両側の間隔は等しい.したがって、軸線間の間隔は、軸線と枠線の間隔よりも2倍大きい. stretch(デフォルト):軸が交差軸全体を占めます.
アイテムが設定できる属性は同じ6つあります. order flex-grow flex-shrink flex-basis flex align-self
既定では、プロジェクトはソース順に並べられています.ただしorderプロパティはflexコンテナでの表示順序を制御します.
flex-growプロパティは、すべてのプロジェクトのflex-growプロパティが1の場合、残りのスペースを等分します(ある場合).1つのプロジェクトのflex-growプロパティが2で、他のプロジェクトが1の場合、前者が占める残りのスペースは他のアイテムの2倍になります.
flex-growとは逆に、flex-shrinkプロパティはプロジェクトの縮小スケールを定義し、すべてのプロジェクトのflex-shrinkプロパティが1であれば、空間が不足している場合は等スケールを縮小します.1つのプロジェクトのflex-shrinkプロパティが0で、他のプロジェクトが1の場合、スペースが不足している場合は、前者は縮小しません.
flex-basisプロパティは、余分なスペースを割り当てる前にプロジェクトが占める主軸スペース(main size)を定義します.ブラウザはこのプロパティに基づいて、主軸に余分なスペースがあるかどうかを計算します.デフォルト値はauto、すなわちプロジェクトの本来のサイズです.
widthまたはheightプロパティと同じ値(350 pxなど)に設定すると、プロジェクトは固定スペースを占めます.(https://css-tricks.com/snippe...このキーワードはまだサポートされていないため、テストが難しく、兄弟の最大コンテンツ、最小コンテンツ、適切なコンテンツが何をしているのかを知ることも難しいと述べています.)
flexプロパティはflex-grow、flex-shrink、flex-basisの略記で、デフォルトは0 1 autoです.次の2つのプロパティはオプションです.
このプロパティには、auto(1 auto)とnone(0 auto)の2つのショートカットがあります.ブラウザが相関値を推定するため、3つの分離された属性を単独で書くのではなく、この属性を優先的に使用することをお勧めします.
align-selfプロパティを使用すると、align-itemsプロパティを上書きできる単一のアイテムとは異なる位置合わせが可能になります.デフォルト値はautoで、親要素のalign-items属性を継承し、親要素がない場合stretchと同等です.
このプロパティは、autoを除いてalign-itemsプロパティと完全に一致する6つの値をとることができます.
実はflexレイアウトはあまり自分の理解がなくて、この文章を出して単純に印象を深めるためにまとめて、この文章の大部分のcopyはflexレイアウトのチュートリアルとA Complete Guide to Flexboxから
2009年、W 3 Cは新しい方案---Filexレイアウトを提出し、簡便、完全、応答式に各種ページレイアウトを実現することができる.現在、すべてのブラウザでサポートされています.これは、この機能を安全に使用できることを意味します.(ie 10+はflexレイアウトをサポートしており、私の現在のプロジェクトではcorsを使用してドメイン間を解決しているので、ieのサポートもie 10+、完璧に一致しています)
口では支持を言っていますが、ieは私たちを失望させません.flexのieの下のバグと解決方法は、自分で取る必要があります.
一、基礎と用語
1、flexレイアウトは何ですか
FlexはFlexible Boxの略で、「フレキシブルレイアウト」を意味し、ボックスモデルに最大の柔軟性を提供します.いずれのコンテナもFlexレイアウトとして指定できます.
.box{
display: flex;
}ライン内要素はFlexレイアウトも使用できます.
.box{
display: inline-flex;
}Webkitカーネルのブラウザには、-webkit接頭辞を付ける必要があります.もちろん、無敵のautoprefixerも使っていれば、そうする必要はありません.
.box{
display: -webkit-flex; /* Safari */
display: flex;
}もう1つ注意したいのは、Flexレイアウトに設定すると、サブ要素のfloat、clear、vertical-alignプロパティが無効になります.
2、基本概念
Flexレイアウトを採用した要素は、Flexコンテナ(flex container)と呼ばれ、略称は「コンテナ」である.すべてのサブエレメントが自動的にコンテナメンバーとなり、Flexプロジェクト(flex item)、略称「プロジェクト」と呼ばれます.コンテナのデフォルトでは、水平の主軸(main axis)と垂直の交差軸(cross axis)の2本の軸があります.主軸の開始位置(枠との交差点)をmain start、終了位置をmain endと言います.交差軸の開始位置をcross start,終了位置をcross endと呼ぶ.プロジェクトの既定値は、スピンドルに沿って配置されます.単一項目が占める主軸空間をmain size,占有する交差軸空間をcross sizeと呼ぶ.
二、属性
1、容器の属性
コンテナで設定できる属性は、以下の6つです.
1.1 flex-direction
flex-directionプロパティは、主軸の方向(すなわち、項目の配列方向)を決定します.
.box {
flex-direction: row | row-reverse | column | column-reverse;
}この属性の4つの値は、それぞれ次のとおりです.
1.2 flex-wrap
既定では、プロジェクトは1本の線(軸線とも呼ばれる)に並んでいます.flex-wrapプロパティは、1つの軸線が並べられない場合に、どのように改行するかを定義します.
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}この属性の3つの値は、それぞれ次のとおりです.
1.3 flex-flow
flex-flowプロパティはflex-directionプロパティとflex-wrapプロパティの略記形式で、デフォルト値はrow nowrapです.
.box {
flex-flow: || ;
} 1.4 justify-contentプロパティ
justify-contentプロパティは、主軸上のアイテムの位置合わせを定義します.
.box {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}このアトリビュートの6つの値は、それぞれ(具体的な位置合わせは軸の方向に関係します.以下、主軸を左から右に仮定します).
1.5 align-itemsプロパティ
align-itemsプロパティは、交差軸上でアイテムがどのように整列するかを定義します.
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}このアトリビュートの5つの値は、それぞれ表示されます(具体的な位置合わせは、交差軸の方向に関係します.次に、交差軸を上から下に設定します).
1.6 align-contentプロパティ
align-contentプロパティは、複数の軸の位置合わせを定義します.アイテムに軸が1本しかない場合は、このアトリビュートは機能しません.
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}この属性の6つの値は、それぞれ次のとおりです.
2、項目の属性
アイテムが設定できる属性は同じ6つあります.
2.1 order
既定では、プロジェクトはソース順に並べられています.ただしorderプロパティはflexコンテナでの表示順序を制御します.
.item {
order: ; /* default 0 */
} 2.2 flex-grow
flex-growプロパティは、すべてのプロジェクトのflex-growプロパティが1の場合、残りのスペースを等分します(ある場合).1つのプロジェクトのflex-growプロパティが2で、他のプロジェクトが1の場合、前者が占める残りのスペースは他のアイテムの2倍になります.
.item {
flex-grow: ; /* default 0 */
} 2.3 flex-shrink
flex-growとは逆に、flex-shrinkプロパティはプロジェクトの縮小スケールを定義し、すべてのプロジェクトのflex-shrinkプロパティが1であれば、空間が不足している場合は等スケールを縮小します.1つのプロジェクトのflex-shrinkプロパティが0で、他のプロジェクトが1の場合、スペースが不足している場合は、前者は縮小しません.
.item {
flex-shrink: ; /* default 1 */
} 2.4 flex-basis
flex-basisプロパティは、余分なスペースを割り当てる前にプロジェクトが占める主軸スペース(main size)を定義します.ブラウザはこのプロパティに基づいて、主軸に余分なスペースがあるかどうかを計算します.デフォルト値はauto、すなわちプロジェクトの本来のサイズです.
.item {
flex-basis: | auto; /* default auto */
} widthまたはheightプロパティと同じ値(350 pxなど)に設定すると、プロジェクトは固定スペースを占めます.(https://css-tricks.com/snippe...このキーワードはまだサポートされていないため、テストが難しく、兄弟の最大コンテンツ、最小コンテンツ、適切なコンテンツが何をしているのかを知ることも難しいと述べています.)
2.5 flex
flexプロパティはflex-grow、flex-shrink、flex-basisの略記で、デフォルトは0 1 autoです.次の2つのプロパティはオプションです.
.item {
flex: none | [ ? || ]
}このプロパティには、auto(1 auto)とnone(0 auto)の2つのショートカットがあります.ブラウザが相関値を推定するため、3つの分離された属性を単独で書くのではなく、この属性を優先的に使用することをお勧めします.
2.6 align-self
align-selfプロパティを使用すると、align-itemsプロパティを上書きできる単一のアイテムとは異なる位置合わせが可能になります.デフォルト値はautoで、親要素のalign-items属性を継承し、親要素がない場合stretchと同等です.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}このプロパティは、autoを除いてalign-itemsプロパティと完全に一致する6つの値をとることができます.
三、道が長くて遠い
実はflexレイアウトはあまり自分の理解がなくて、この文章を出して単純に印象を深めるためにまとめて、この文章の大部分のcopyはflexレイアウトのチュートリアルとA Complete Guide to Flexboxから