フレキシブルレイアウトとは何ですか?フレキシブルレイアウトフレックスの基本的なアプリケーション (コード付き)-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

フレキシブルレイアウトとは何ですか?フレキシブルレイアウトフレックスの基本的なアプリケーション (コード付き)

不言

Aug 01, 2018 pm 02:55 PM

柔軟なレイアウト

伸縮性のあるレイアウトとは何ですか?フレキシブルレイアウト (flex) は、その名のとおり、現在では基本的にすべてのブラウザがフレキシブルレイアウトをサポートしています。したがって、この記事で次に共有するのは、フレキシブルレイアウト flex の基本的なアプリケーションです。

柔軟なレイアウトを適用する方法、コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
        .box{
            height:20vh;            
            display: flex;          
        }
        .box div{           
            flex: 1; 
        }
        .box div:last-child{
            flex: 2;
        }
    </style>
</head>
<body>
    <div>
        <div>Document1</div>
        <div>Document2</div>
        <div>Document3</div>
        <div>Document4</div>
        <div>Document5</div>
    </div>    
</body>
</html>

実行結果は次のとおりです:

フレキシブルレイアウトとは何ですか?フレキシブルレイアウトフレックスの基本的なアプリケーション (コード付き)

コンテナの設定

flexには設定できる6つの属性があります:

flex-direction:row(主軸は左から右、デフォルト) / row-reverse (主軸は右から左) / column (主軸は上から下) / column-reverse (主軸は下から上) を決定します。主軸の方向

flex-wrap:nowrap (デフォルト、行の折り返しなし) / Wrap (行の折り返し) / Wrap-reverse (行の折り返し、以下の最初の行) は、アイテムを 1 つの軸に配置できない場合の折り返し方法を決定します

flex-flow: は、上記の 2 つの属性 :flex-flow:row nowrap の省略モードのデフォルト値です。

justify-content: flex-start (デフォルト、左揃え) / flex-end (右揃え) / center (中央) / space-between (両端揃え、項目間の等間隔) /
space-around (各項目間の間隔は等しいため、項目間の間隔は項目と境界線の間の価格の 2 倍になります)。主軸上の項目の配置を決定します。 space-between/around は、間隔を適応的に調整するときに便利です

align-items: flex-start (交差軸の始点の位置合わせ) / flex-end (交差軸の終点の位置合わせ) / center (位置合わせ)交差軸の中点の) /baseline (項目のテキストの最初の行のベースライン配置)/stretch (デフォルト値。項目に高さが設定されていない場合、または自動に設定されている場合、項目は全体を占めます。コンテナの高さ)。交差軸上の項目の配置を定義します

align-content: flex-start (交差軸の始点に位置合わせ) / flex-end (交差軸の終点に位置合わせ) / center (交差軸の位置に位置合わせ)交差軸の中点) /
space-between (交差軸の両端に揃え、軸間の間隔は均等に分布します) /space-around (各軸の両側の間隔は等しいため、間の距離は軸は軸とフレームの間の距離よりも大きい Double)
/ストレッチ (デフォルト値、軸は交差軸全体を占めます)。複数の軸の配置を定義します。プロジェクトに独自の軸がある場合、このプロパティは機能しません。

順序: 数値が小さいほど、配置が高くなります。デフォルトは 0 です。

flex-grow: 項目の拡大率を定義します。デフォルトは 0 です。デフォルトでは、スペースが残っている場合でも項目は拡大されません。スケーリングの方向は、フレックス方向の方向です。

flex-shrink: アイテムの収縮率を定義します。デフォルトは 1 です。スペースが不十分な場合、アイテムは縮小します。値 0 は、スケーリングがないことを意味します。スケーリングの方向は、フレックス方向の方向です。

flex-basis: 余分なスペースを割り当てる前に、項目が占める主軸スペース (メインサイズ) を定義します。ブラウザは、この属性に基づいて主軸に余分なスペースがあるかどうかを計算しません。デフォルト値は auto です。アイテムの元のサイズです。 flex-basis: 80px; 幅 (方向は行) は 80px に設定されます。

flex: は上記の 3 つの属性の略称で、デフォルト値は 0 1 auto です。 auto (1 1 auto) ) およびなし (0 0 auto)

align-self: この属性により、遅延アイテムの配置を他のアイテムとは異なるものにすることができ、align-items の属性値をオーバーライドします。デフォルト値は auto で、親要素の align-items 属性を継承するか、親要素がない場合はストレッチを意味します。

align-self: auto/flex-start/flex-end/center/baseline/stretch flex-basis: 値が 0 の場合と auto (デフォルト) の違い: 前者は項目全体を計算しませんが、後者は無視しますコンテンツは計算されるため、レイアウトで各項目のパーセンテージ構成が必要な場合は、flex-basis を 0 に設定する必要があります。

関連推奨事項:

HTML でのフレキシブルレイアウト (Flex) の紹介 (コード付き)

以上がフレキシブルレイアウトとは何ですか?フレキシブルレイアウトフレックスの基本的なアプリケーション (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

HTMLのブール属性とは何ですか？いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

See all articles