フレキシブルレイアウトとは何ですか?フレキシブル レイアウト フレックスの基本的なアプリケーション (コード付き)
伸縮性のあるレイアウトとは何ですか?フレキシブル レイアウト (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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1657
14
1415
52
1309
25
1257
29
1230
24
vue と Element-plus を使用して柔軟なレイアウトとレスポンシブ デザインを実装する方法
Jul 18, 2023 am 11:09 AM
vue と Element-plus を使用して柔軟なレイアウトとレスポンシブ デザインを実装する方法 現代の Web 開発では、柔軟なレイアウトとレスポンシブ デザインがトレンドになっています。柔軟なレイアウトにより、さまざまな画面サイズに応じてページ要素のサイズと位置が自動的に調整され、レスポンシブ デザインにより、さまざまなデバイスでページが適切に表示され、優れたユーザー エクスペリエンスが提供されます。この記事では、vueとElement-plusを使って柔軟なレイアウトとレスポンシブデザインを実現する方法を紹介します。私たちの仕事を始めるにあたって、私たちは、
CSS Flex レイアウトを使用して水平スクロール効果を実現する方法
Sep 27, 2023 pm 02:05 PM
CssFlex エラスティック レイアウトを使用して水平スクロール効果を実現する方法の概要: Web 開発では、コンテナー内に一連の項目を表示し、これらの項目が水平方向にスクロールできるようにする必要がある場合があります。現時点では、CSSFlex エラスティック レイアウトを使用して水平スクロール効果を実現できます。単純な CSS コードを使用してコンテナのプロパティを調整することで、この効果を簡単に実現できます。この記事では、CSSFlex を使用して水平スクロール効果を実現する方法と、具体的なコード例を紹介します。 CSSF1
CSS Flex レイアウトを使用してレスポンシブ デザインを実装する方法
Sep 26, 2023 am 08:07 AM
CSSFlex エラスティック レイアウトを使用してレスポンシブ デザインを実装する方法 モバイル デバイスが普及した今日の時代では、レスポンシブ デザインはフロントエンド開発における重要なタスクになっています。中でも、CSSFlex エラスティック レイアウトの使用は、レスポンシブ デザインを実装するための一般的な選択肢の 1 つとなっています。 CSSFlex のエラスティック レイアウトは、強力な拡張性と適応性を備えており、さまざまなサイズの画面レイアウトを迅速に実装できます。この記事では、CSSFlex エラスティック レイアウトを使用してレスポンシブ デザインを実装する方法と、具体的なコード例を紹介します。
HTMLでdivを中央に配置する方法
Apr 05, 2024 am 09:00 AM
HTML で div を中央に配置するには 2 つの方法があります: text-align 属性 (text-align: center) を使用します: より単純なレイアウトの場合。柔軟なレイアウト (Flexbox) を使用する: より柔軟なレイアウト制御を提供します。手順には、親要素で Flexbox (表示: flex) を有効にすることが含まれます。 div を Flex アイテム (flex: 1) として設定します。縦方向と横方向の中央揃えには、align-items プロパティと justify-content プロパティを使用します。
CSS Flexフレキシブルレイアウトにおけるスペースと空白の処理方法を詳しく解説
Sep 26, 2023 pm 08:22 PM
CSSFlex フレキシブル レイアウトにおけるスペースと空白の処理方法の詳細な説明 はじめに: CSSFlex フレキシブル レイアウトは、レスポンシブな Web ページ レイアウトを簡単に作成するのに役立つ、非常に便利で柔軟なレイアウト方法です。 Flex レイアウトを使用する場合、間隔の設定や空白の処理で問題が発生することがよくあります。この記事では、Flex レイアウトでスペースと空白を処理する方法を詳しく説明し、具体的なコード例を示します。 1. 間隔の設定 Flex レイアウトでは、いくつかの方法で間隔を設定できます。これらについては以下で紹介します
CSS Flex レイアウトを使用して同じ高さの列レイアウトを実現する方法
Sep 27, 2023 pm 03:17 PM
CSS Flexible Layout を使用して同じ高さの列レイアウトを実装する方法 CSS Flexible Box Layout (CSS FlexibleBox Layout) は、Flex レイアウトと呼ばれ、ページ レイアウトに使用されるモジュールです。フレックス レイアウトを使用すると、同じ高さの列レイアウトを簡単に実装できるため、コンテンツの高さに関係なく同じ高さで列を表示できます。この記事では、CSSFlex レイアウトを使用して、同じ高さの列レイアウトを実現する方法を紹介します。以下に具体的なコード例を示します。 HTML 構造: &
CSS フレキシブル レイアウト プロパティのガイド: 位置スティッキーとフレックスボックス
Oct 27, 2023 am 10:06 AM
CSS フレキシブル レイアウト プロパティのガイド:positionsticky と flexbox フレキシブル レイアウトは、現代の Web デザインにおいて非常に人気のある便利なテクニックとなっています。これは、Web ページがさまざまなデバイスや画面サイズで適切に表示および応答できるように、適応型 Web ページ レイアウトを作成するのに役立ちます。この記事では、position:sticky と flexbox という 2 つの柔軟なレイアウト プロパティに焦点を当てます。具体的なコード例を使用して、その使用法について詳しく説明します。
CSS Flex レイアウトを使用して 2 列レイアウトを実装する方法
Sep 26, 2023 am 10:54 AM
CSSFlex フレキシブル レイアウトを使用して 2 列レイアウトを実装する方法 CSSFlex フレキシブル レイアウトは、Web ページ レイアウトのプロセスを簡素化できる最新のレイアウト テクノロジであり、デザイナーや開発者は柔軟でさまざまな画面サイズに適応できるレイアウトを簡単に作成できます。その中でも、2 列レイアウトの実装は、Flex レイアウトの共通要件の 1 つです。この記事では、CSSFlex エラスティック レイアウトを使用して単純な 2 列レイアウトを実装する方法を紹介し、具体的なコード例を示します。 Flex コンテナとプロジェクトの使用
