CSS3 レイアウトプロパティとは何ですか?-フロントエンドQ&A-php.cn

css3 レイアウト属性には、flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content、order、flex-grow、flex-shrink などが含まれます。

CSS3 レイアウトプロパティとは何ですか?

このチュートリアルの動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。

1. フレキシブルボックスモデル (フレキシブルボックスまたはフレックスボックス)

フレキシブルボックスモデルの最大の特徴は、動的に変更できることです。サブ要素の幅と高さを調整して、さまざまな画面サイズで適切なレイアウトを満たします。

(1) フレキシブルコンテナのプロパティ

flex-direction: 主軸の方向を設定し、弾性サブ要素の配置を決定します

flex- Wrap: When elastic 子要素がフレキシブルコンテナのスコープを超えたときにラップするかどうか

flex-flow:flex-direction および flex-wrap プロパティのショートカット、複合プロパティ

justify-content : 主軸の位置合わせ

align-items: 交差軸の位置合わせ

align-content: 交差軸にスペースがある場合の交差軸の位置合わせ

(2) Elastic サブ要素の属性

order: フレキシブルコンテナ内のサブ要素の順序を制御します。

flex-grow: Elastic サブ要素の拡張率を設定します。要素

flex-shrink: 弾性サブ要素を設定します。要素の収縮率

flex-basis: 伸長前の弾性サブ要素のデフォルトのサイズ値を指定します。 width 属性と height 属性

flex: flex-grow、flex-shrink、および、basic 属性の flex-Composite 属性

align-self: 独立した伸縮性のある子要素がデフォルトの配置設定をオーバーライドできるようにします。エラスティックコンテナの

#Flexbox メニュー項目の実際の戦闘

    Flexbox  
    HTML
 CSS
 JavaScript
 Sass
 Ruby
 Mongo

ログイン後にコピー

.menu{ list-style-type: none; padding: 0; margin: 0; display: flex; flex-flow: row wrap; } .menu li{ height: 40px; text-align: center; line-height: 40px; flex: 1 1 100%; } .menu li:nth-child(1){ background-color: #39ADD1; } .menu li:nth-child(2){ background-color: #3079AB; } .menu li:nth-child(3){ background-color: #982551; } .menu li:nth-child(4){ background-color: #E15258; } .menu li:nth-child(5){ background-color: #CC6699; } .menu li:nth-child(6){ background-color: #52AC43; } @media (min-width:480px) { .menu li{ flex: 1 1 50%; } } @media (min-width:768px) { .menu{ flex-flow: row nowrap; } }

ログイン後にコピー

2. 複数の列の詳細な説明

属性リスト:

columns: 複合属性 (column-width および columns-count)、幅と列数を設定;

column-width: 各列の幅を設定

column-count: 列数を設定します

column-gap: 列間のギャップを設定します

column-rule: 複合属性 (column-rule-width、column -rule-style、column-rule-color)、列間の境界線のスタイルを設定します

column-fill: 列の高さを設定します

column-span: 列の高さを統一するかどうかを設定しますすべての列にまたがる

3、メディアクエリ

ベストプラクティス:

/*超小屏幕（手机，小于768px)*/ /*没有任何媒体查询相关的代码，移动设备优先*/ /*小屏幕（平板，大小等于768）*/ @media (min-width: 768px) { } /*中等屏幕（桌面显示器，大于等于992px)*/ @media (min-width: 992px) { } /*大屏幕（大桌面显示器，大于等于1200px)*/ @media (min-width: 1200px) { }

ログイン後にコピー

(学習ビデオ共有:css ビデオチュートリアル、Web フロント-入門チュートリアルを終了)

以上がCSS3 レイアウトプロパティとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。