戦闘にWebフロントエンドを取得:詳細ないくつかの共通の属性をHTML / CSSレイアウト弾力

弾性コンセプトのレイアウト名:

図1に示すように、容器:弾性レイアウトを追加する親要素、項目:プロジェクトと呼ばれる各サブコンテナのレイアウト弾性要素、。

図2に示すように、スピンドルは:弾性レイアウトでは、所定の水平/垂直方向(屈曲方向)によってスピンドル属性、他の方向に交差軸としても知られている主軸に垂直。

いくつかの重要な基本的な属性の弾性レイアウト:

図1は、フレックス方向性は、主軸の方向を決定する(すなわち、プロジェクトの配列方向)。

行(デフォルト値):スピンドルは、左端の開始点に水平です。

行逆水平方向にスピンドル、右端から始まります。

カラム:メイン垂直方向エッジ上の出発点。

カラムリバース:垂直方向のスピンドル、低い出発点に沿っ。

図2に示すように、フレックスラップ属性定義(改行かどうかを定義)

NOWRAP(デフォルト):DOはラップではありません。容器が広く十分でない場合には、各項目の幅が絞られます。

ラップ:ラッピング、及び容器の頂最初の行。

ラップ逆:ラッピング、及び第一の容器列の底。

注:(フレックスフローが省略形の屈曲方向とフレックスラップで、デフォルト値:フレックスフロー:行ラップ;)

図3は、正当化コンテンツ属性は、スピンドル上の項目の位置合わせを定義します。

フレックススタート(デフォルト):プロジェクトがスピンドル出発点に位置しています。

フレックスエンド:プロジェクトは、スピンドルの端に位置しています。

行優先下でトップ、カラム逆起点に右、カラム・起点に左、行逆出発点に開始点。

センター:センター

スペース間:正当化、項目間の間隔が等しくなっています。(先頭と最終的なプロジェクト、およびなし親コンテナのエッジ間隔)

空間アラウンド:各項目の両側に等間隔。しかし、二回プロジェクトプロジェクトの大きさと境界の間隔の間のギャップ。(最初と最後のプロジェクトは、親コンテナの縁と一定の間隔があります)

空間均等:各項目の両側に等間隔。したがって、プロジェクトと同じフレーム間隔でプロジェクト間の間隔。

4、ALIGN-商品アイテム属性の定義クロス軸を整列する方法。

フレックススタート:交差軸位置合わせの開始点。

フレックスエンド:端クロス軸アラインメント。

中央:交差軸位置合わせの中点。

ベースライン:プロジェクトベースラインのアライメントのテキストの最初の行。(テキストのハイラインは、フォントサイズは、各ラインのベースラインに影響を与えます)

ストレッチ(デフォルト):プロジェクトの高さを設定または自動に設定されていない場合は、コンテナの高さ全体を占めています。

web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
(详细的前端项目实战教学视频)

5、ALIGN-コンテンツ属性は、軸配向の複数を定義します。プロジェクトは唯一つの軸である場合は、プロパティが動作しません。

(項目はALIGN-コンテンツを使用して、複数の行を交換する場合にALIGN-アイテムを置換することができます)

おすすめ

転載: blog.51cto.com/14592820/2449139