CSS クラシックレイアウトフレキシブルレイアウト_html/css

CSS クラシックレイアウトフレキシブルレイアウト_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:38:14

オリジナル

1272 人が閲覧しました

私たちがブラウザを閲覧する際、ブラウザの表示倍率を拡大・縮小したり、デバイスごとに解像度が異なったりすることがよくあります。したがって、フレキシブルボックスモデルという新しい知識を学ぶ必要があります。

柔軟なボックスモデル

項目の配置、方向、並べ替えを実現し（項目のサイズと位置が動的に生成される場合でも）、サブ要素の幅と高さを動的に変更でき、優れた適応性を備えています。

写真は伸縮性のあるレイアウトのおおよその範囲を示しています。

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

属性	説明
flex-direction	主軸の方向を設定し、弾性サブ要素の配置を決定します
flex-wrap	フレックス子のとき要素はフレックスコンテナの範囲を超えています
align-content	の配置は交差軸に空白があります、交差軸の配置

次に、フレキシブルレイアウトを使用してレスポンシブメニューを実装します。まずコードを見てみましょう。

上記では、柔軟なレイアウトの大まかなモデルを実装しました。

以前見た別の面接の質問について話しましょう。これも柔軟なレイアウトの質問を書く必要がありますが、別の方法を見つけることもできます:

以下の図に示すようにレイアウト要件を実装します: サイドバー固定幅 200 ピクセル、コンテンツヘッダー幅適応型、ウィンドウ幅が 600px 未満の場合、3 列レイアウトになります

実装のアイデアはエラスティックレイアウトと同じです。コードを見てください:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Flexbox响应式菜单</title>    <link rel="stylesheet" type="text/css" href="mycss.css"/></head><body><ul class="menu">    <li><a href="#">number1</a></li>    <li><a href="#">number2</a></li>    <li><a href="#">number3</a></li>    <li><a href="#">number4</a></li>    <li><a href="#">number5</a></li>    <li><a href="#">number6</a></li></ul></body></html>

ログイン後にコピー

著作権表示: この記事はブログです。これはオリジナルの記事であり、ブロガーの許可なく複製することはできません。