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

柔軟なボックスモデル

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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:38 AM

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

柔軟なボックスモデル

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

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

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

属性	説明
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>

ログイン後にコピー

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7323

Java チュートリアル

1625

CakePHP チュートリアル

1350

Laravel チュートリアル

1262

PHP チュートリアル

1209

Related knowledge

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？ Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、