CSS両翼レイアウトの詳細説明-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS両翼レイアウトの詳細説明

php中世界最好的语言

Mar 21, 2018 pm 01:28 PM

css詳しい説明

今回はCSS二重飛行翼レイアウトについて詳しく解説します。CSS二重飛行翼レイアウトを実装する際の注意点について、実際の事例を見てみましょう。

ダブルフライングウィングレイアウトは、両端の幅と高さが固定され、中央が適応型の3列レイアウトです

まず写真を撮りましょう。左右の灰色のブロックは幅と高さが固定されており、中央の緑色の領域は幅と高さの適応性があります

方法 1: Flex Elastic Layout を通じて実装します

コードを見てください

//HTML结构，p2是中间的自适应区域
...
<body>
    <p class="wrap">
        <p class="p1"></p>  
        <p class="p2"></p>
        <p class="p3"></p>
    </p>
</body>
...

*{  //先简单粗暴的解决一下浏览器的默认样式  
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing:border-box;   //使用border-box，盒模型好计算，妈妈再也不用担心我算不清块宽高了
}
.wrap{
    width: 100%;
    height: 100%;
    display: flex;     //使用弹性布局
    flex-flow:row nowrap;  //以沿主轴方向行显示，不换行，从而来显示3个块
    justify-content:space-around;  //这一个加和不叫其实也没事，加上去的意思就是两端对齐
}

[class^=&#39;p&#39;]{  // 给所有的p都加上高和边框样式，方便观看，不然都缩成一条线了
    height: 400px;
    border: 1px solid #f00;
}

.p1,.p3{  //给两端的p固定的宽
    width: 200px;
    background-color: #ccc;
    flex-shrink: 1; //默认是1，所以不用写也没事，写出来自是表达这个意思
}
.p2{
    background-color: #0f0;
    flex-grow:1;  //这个比较重要，作用是让第二个块的宽度撑满剩余的空间
}

方法 2: 配置を通じて実現します

HTML 構造は変更されず、スタイルを見てください

効果

ケースこの記事では、さらに興味深い内容については、PHP 中国語 Web サイトの他の関連記事にご注目ください。推奨読書:

CSS3のTransitionスムーズトランジションメニューバーの実装

は毎秒心臓の鼓動の効果をシミュレートします

以上がCSS両翼レイアウトの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

CSSがよくわからない場合、どのCSSが最も理にかなっていますか？Apr 19, 2025 am 09:56 AM

ピーター・ポールはこの質問を投稿しました：

クリップパスでアニメーション化しますApr 19, 2025 am 09:52 AM

Clip-Pathは、私たちが一般的に知っているCSSプロパティの1つですが、何らかの理由で頻繁に手を伸ばすことはできません。その意味では少し怖いです

GatsbyでGraphQLプレイグラウンドを使用しますApr 19, 2025 am 09:51 AM

私はあなたのほとんどがすでにギャツビーについて聞いていると仮定しており、少なくともそれが基本的に反応サイトの静的サイトジェネレーターであることを大まかに知っています。一般的に

タイプまたはテスト：両方ではないのはなぜですか？Apr 19, 2025 am 09:50 AM

時々、議論は型付けされたJavaScriptの価値について燃え上がります。「もっとテストを書くだけです！」対戦相手を叫ぶ。「ユニットテストをタイプに置き換えてください！」

GitのグラフィカルユーザーインターフェイスApr 19, 2025 am 09:46 AM

Lemmeは、最近のGit Guiの主要なプレーヤーのように見えるものをまとめています。

自分の怠zyなロードを転がすためのヒントApr 19, 2025 am 09:44 AM

「怠zyな読み込みを使用できる」と聞いたことがあるかもしれません（または電話を発行しました！特に重いウェブページをスリムにする方法を探しているとき。

CSS 2019調査の3つの予測Apr 19, 2025 am 09:43 AM

CSS状態のような開発者調査を実行することは、マルチステージプロセスです。まず、データを収集する必要があります。次に、使用可能な形状に処理します。

最後に...最終的に約束の投稿Apr 19, 2025 am 09:39 AM

「JavaScriptの約束で最終的に発砲するのはいつですか？」これは私が最近のワークショップで尋ねられた質問であり、私は何かをクリアするために少し投稿を書くと思いました

See all articles

ホットAIツール

ホットツール

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。