レスポンスレイアウト【flex】
応答メソッドの要約に由来
以上のレスポンスレイアウトを理解し、flexフレックスレイアウトを重点的に紹介します.とても役に立ちますが、記憶障害のある私は、次回もスムーズに覚えられるように、まとめておきましょう.ついでに私が見たいくつかのブログの内容を皆さんと共有して、あまり詳しくなく、よく理解しています.
前に書いてください
1.css属性互換性の表示
https://caniuse.com/
2.ケースモデルbox-sizing
content-box(標準ボックスモデル)width = content-width;
解析:箱の内容幅が固定されている場合、箱のpaddingとborderを設定すると、箱モデルの幅が大きくなり、外に広がり、実際のcontent内容は変わらない(注意:marginは常に箱の外にある).
border-box(IEボックスモデル)width = content-width + padding +border;
解析:箱の内容幅が固定されている場合、箱のpaddingとborderを設定し、箱モデルの幅が変わらず、内側に広がり、実際のcontent内容が小さくなります(注意:marginは常に箱の外にあります).
3.スタイル互換性(postCssプラグイン)
vscode自動css互換コードプラグインの追加
flexフレックスレイアウト
Flexレイアウトを採用した要素をFlexコンテナ(flex container)と呼び、略称する.
容器」です.そのすべてのサブエレメントはFlexプロジェクト(flex item)と呼ばれ、略称されます.
プロジェクト
なお、Flexレイアウトに設定すると、サブエレメントのfloat、clear、vertical-alignプロパティは無効になります.
1.弾性容器
display:flex;
2.コンテナ属性
justify-content-----プロジェクトの主軸上の位置合わせ(水平または垂直はflex-directionによって決定される) flex-start(デフォルト左) flex-end(右) center(中央) space-between(両端揃え項目間の間隔が等しい) space-around(各項目の両側の間隔が等しい) align-items---------交差軸の位置合わせ(水平または垂直はflex-directionによって決定) stretch(デフォルトでは、アイテムが高さを設定していないかautoに設定されている場合は、コンテナ全体の高さを占める) flex-start(始点位置合わせ) flex-end(位置合わせ終点) center(中央揃え) baseline(プロジェクトの最初の行のテキストのベースラインの位置合わせ) flex-direction---------主軸の方向を決める row(デフォルト横並び開始点左) row-reverse(横配列起点右) column(縦配列起点がヘッド【上】) row-reverse(縦配列起点が尾【下】) flex-wrap-----サブエレメントが改行されているかどうか nowrap(デフォルトでは改行しない) wrap(改行) wrap-reverse(逆改行) flex-flow--------(flex-directionプロパティとflex-wrapプロパティの略)デフォルトはrow nowrap です.
3.プロジェクト属性
order order: /* default 0 */
JavaScript構文:object.style.order="2" 規定項目順序の数値が小さいほど、上位に並ぶ.
のデフォルト値は0 です.
flex-grow flex-grow: ; /* default 0 */
JavaScript構文:object.style.flexGrow="5" 規定項目の拡大率すべてのアイテムのflex-growプロパティが1の場合、残りのスペースは等分されます(存在する場合).1つのプロジェクトのflex-grow属性が2で、他のプロジェクトが1である場合、前者が占める残りの空間は他のプロジェクトの2倍になる. のデフォルト値は0 です.
flex-shrink flex-shrink: number|initial|inherit; /* default 1 */
JavaScript構文:object.style.flexShrink="5" は、プロジェクトの縮小率を定義する.
すべての項目のflex-shrink属性が1の場合、空間が不足すると等比例縮小する.1つのプロジェクトのflex-shrink属性が0で、他のプロジェクトが1である場合、空間が不足する場合、前者は縮小しない. のデフォルト値は1 です.
flex-basis flex-basis: number|auto|initial|inherit; /* default auto */
JavaScript構文:object.style.flexBasis="200px" は、余分な空間を割り当てる前に、プロジェクトが占有する主軸空間(main size)を定義する.ブラウザはこのプロパティに基づいて、主軸に余分なスペースがあるかどうかを計算します. widthまたはheight属性と同じ値(ep:300 px)に設定と、プロジェクトが固定空間を占める. のデフォルト値はauto です.
flex flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;/* default 0 1 auto */
JavaScript構文:object.style.flex="1" デフォルト値は0 1 auto です.
align-self align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;/* default auto */
JavaScript構文:object.style.alignSelf="center" は、align-itemsプロパティを上書きできる他のアイテムとは異なる位置合わせ方法を定義します. のデフォルト値はautoで、要素は親コンテナのalign-items属性を継承します.親コンテナがない場合はstretchです. スピンドルとクロスシャフトの詳細はご覧ください:30分でflexレイアウトを徹底的に理解します
レイアウト練習リンク
codepan