CSS・Flex&Gridレイアウト・セルフテストマニュアル
前に書く
この文書では、flexおよびgridレイアウトの基本的な概念と新しい属性のみをリストし、関連知識の習得度を自己検査するために使用します.具体的なチュートリアルおよび例は、文末の引用文献も参照してください.
flex容器(flex container) flexプロジェクト(flex item) スピンドル(main axis) 主軸位置(main start,main end) 主軸空間(main size) 交差軸(cross axis) 交差軸位置(cross start、cross end) 交差軸空間(cross size)
コンテナのプロパティ flex-direction row row-reverse column column-reverse
flex-wrap nowrap wrap wrap-reverse
flex-flow デュアルパラメータ:flex-direction,flex-wrap justify-content flex-start flex-end center space-between space-around
align-items flex-start flex-end center baseline stretch
align-content(wrap発生時のみ有効) flex-start flex-end center stretch space-between space-around
プロジェクト属性 order デフォルト:0 flex-grow デフォルト:0 flex-shrink デフォルト:1 flex-basis デフォルト:auto flex 3パラメータ:flex-grow,flex-shrink,flex-basis align-self auto flex-start flex-end center baseline stretch
Tips: itemのflexの3つのパラメータはすべて書いたほうがいいです.実際には: itemのflexプロパティ: デフォルト:0 1 auto パラメータ1:0は非拡張を表し、非0は比例演算拡張に関与する を表す.パラメータ2:0は非圧縮を表し、非0は比例演算に関与する圧縮 を表す.パラメータ3:autoはデフォルトのサイズを表し、親要素に対してパーセンテージと固定サイズが一般的です.
flex-grow:親コンテナに空き領域がある場合に有効です. flex-shrink:親コンテナの総空間を超えた場合に有効です. flex-basis:空き領域を割り当てる前の前処理;
grid容器 gridグリッド線 gridユニット grid領域 grid軌道 コンテナのプロパティ grid-template-rows grid-template-columns grid-template-ares
領域プロパティ grid-area
参考文献 Flexレイアウトチュートリアル:文法編作者:チェン一峰 Flexレイアウトチュートリアル:実例編作者:チェン一峰 20/80原則学習CSS Gridレイアウト(訳)著者:一歩
この文書では、flexおよびgridレイアウトの基本的な概念と新しい属性のみをリストし、関連知識の習得度を自己検査するために使用します.具体的なチュートリアルおよび例は、文末の引用文献も参照してください.
Flexレイアウト
コンセプト
ツールバーの
Tips:
flex: 0 1 auto≠flex: 0 1しかしよくある書き込み:flex: 1意味:もし余剰空間が存在するならば、このitemはいっぱい充填します;ただし、スペースが足りない場合(親コンテナを超えている場合)、同じ:flex: 1≠flex: 1 1 auto flexパラメータ2とパラメータ3のデフォルト値は:1 auto Gridレイアウト
コンセプト
ツールバーの
参考文献