フレックスレイアウトに関する完全な入門チュートリアル

開発 2023-10-04 20:36:08 訪問数: null

概要

  • CSS の概要
  • ボックスモデル
  • フレックスボックスとは何ですか
  • フレックス方向
  • フレックスラップ
  • フレックスフロー
  • コンテンツの正当化
  • アイテムの整列
  • コンテンツの整列
  • 注文
  • フレックスグロー
  • フレックスシュリンク
  • フレックスベース
  • フレックス
  • 整列自己

Flexbox の基礎 + プロジェクト実践ビデオ

ソースコードのリンク

CSS の概要

参考資料

カスケード スタイル シートとは

CSSとはCascading Style Sheetの略称です。Web ページのスタイルを (強化された) 制御するためのマークアップ言語であり、Web コンテンツからスタイル情報を分離できます。

スタイル構文

Selector {
    
    property:value}

Web ページにスタイルシートを追加する方法

次の 3 つの方法で、Web ページにスタイル シートを追加できます。ターゲットに最も近いスタイル定義が優先されます。優先度の高いスタイルは、優先度の低いスタイルの重複しない定義を継承しますが、重複する定義をオーバーライドします。

インラインスタイル

インライン定義では、オブジェクトのマークアップ内でオブジェクトの style 属性を使用して、それに適用されるスタイル シート属性を定義します。

示例代码：

<p style="color:#f00;">这一行的字体颜色将显示为红色</p>

スタイル ブロック オブジェクトの埋め込み

HTML ドキュメントのマークアップにブロック オブジェクトを<head></head>挿入し、その中に次のコードを挿入できます。<style></style><style></style>

示例代码：

body {
  background:#fff;
  color:#000;
}
p {
  font-size:14px;
}

スタイルシートへのリンク

まず外部スタイル シート ファイル *.css を作成してから、HTML リンク オブジェクトを使用できます。

示例代码：

<link rel="stylesheet" href="*.css" />

フレックスレイアウト

Web ページのレイアウト (レイアウト) は、CSS の主要なアプリケーションです。

伝統的なレイアウト

カバー

ボックス モデルに基づくレイアウトの従来のソリューションは、表示属性 + 位置属性 + フロート属性に依存します。

フレックスボックスのレイアウト

カバー
CSS フレキシブル ボックス レイアウト モジュール (フレックスボックス レイアウトと呼ばれます) は、CSS3 の新しいレイアウト モードであり、従来のモードのラベルの配置、方向、並べ替え、その他の欠陥を改善するために使用されます。

フレックス コンテナの主な特徴は、さまざまな画面サイズで可能な限り最善の方法で利用可能なスペースを埋めるために、子の幅または高さを変更できる機能です。

最も重要な機能は、画面の違いにより親ビューのサイズが変更された場合、親ビューの利用可能なスペースを可能な限り埋めるために、親ビューがサブビューの幅と高さを動的に変更できることです。

多くのデザイナーや開発者は、フレックスボックス レイアウトの方が使いやすいと感じており、従来のレイアウトよりも少ないコードで要素の配置を実現できるため、開発プロセスが簡素化されます。

最新のフレックスボックスをサポートするブラウザ

  • クロム29+
  • Firefox 28+
  • Internet Explorer 11以降
  • オペラ 17+
  • Safari 6.1+ (接頭辞 -webkit-)
  • アンドロイド4.4以上
  • iOS 7.1以降 (接頭辞-webkit-)

ブラウザのサポート機能を表示します。

フレックスボックスの使用法

フレックスボックス レイアウトを使用するには、親タグに表示属性を設定するだけです。

.flex-container {
  display: -webkit-flex; /* Safari */
  display: flex;
}

子要素でフレックスボックス レイアウトを使用する場合は、次のように記述できます。

.flex-container {
  display: -webkit-inline-flex; /* Safari */
  display: inline-flex;
}

Note: これは、コンテナがフレックスボックス レイアウトを使用できるようにする唯一の属性です。これにより、すべてのサブビューが即座にフレックス アイテムになることができます。

ボックスモデル

フレックスボックス関連のプロパティについて学び始める前に、まずフレックスボックス モデルを紹介します。

クラスとオブジェクトの類似性

divクラス: 、、、pなどの抽象的な概念ですspan。inputタグ

オブジェクト: オブジェクトとは<div></div>、<p />、<span></span>、<input />などの特定のものです。

ボックスモデル構造

コード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexbox-model</title>
    <style>

        .flexbox-model-container {
            background-color: #FECE3F;
            width: 600px;
            height: 250px;
            display: flex;
        }

        .flexbox-model {
            background-color: green;
            width: 200px;
            height: 50px;
            padding: 50px;
            border: 10px solid red;
            margin: 20px;
        }
    </style>
</head>
<body>

<div class="flexbox-model-container">
    <div class="flexbox-model">
        flexbox-model
    </div>
</div>

</body>
</html>

レンダリング

カバー

幅と高さの計算

ボックスの幅 = レンダリング内の青い境界線の幅

ボックスの高さ = レンダリングの青い境界線の高さ

標準ボックスモデル構造図

カバー

フレックスコンテナとフレックスアイテムの関係


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flexbox-model</title>
    <style>
        .flex-item {
            width: 120px;
            height: 120px;
            background-color: white;
            margin: 20px;
        }

        .flex-container {
            background-color: #FECE3F;
            width: 600px;
            height: 220px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>

<div class="flex-container">
    <div class="flex-item">flex-item</div>
    <div class="flex-item">flex-item</div>
    <div class="flex-item">flex-item</div>
</div>

</body>
</html>

効果図分析

下の図の黄色の図はflex-container3 つの白い四角です。これは通常 と呼ばれる親ビューでありflex-item、flex-container通常と呼ばれるサブビューです。その中には複数存在する可能性がありますが、直接のビューは 1 つだけです。複数あります 配列方向 下の図では3つの項目の配列方向が左から右となっており、配列方向と一致する行を 、もう一方の行を と呼びます。flex-item容器flex-itemflex-container项目容器项目项目容器容器项目主轴交叉轴

カバー

コンテナのフレックスボックスプロパティ

  • フレックス方向
  • フレックスラップ
  • フレックスフロー
  • コンテンツの正当化
  • アイテムの整列
  • コンテンツの整列

アイテムのフレックスボックスのプロパティ

  • 注文
  • フレックスグロー
  • フレックスシュリンク
  • フレックスベース
  • フレックス
  • 整列自己

フレックス方向

CSS flex-direction プロパティは、フレックス コンテナ内で内部要素をどのようにレイアウトするかを指定し、主軸の方向 (正または負) を定義します。

row と row-reverse の値は、フレックス コンテナーの方向性の影響を受けることに注意してください。dir 属性が ltr の場合、row は左から右の方向の水平軸を表し、row-reverse は右から左を表します。dir 属性が rtl の場合、row は右から左の方向の軸を表し、row-reverse は From を表します。左から右へ。

行

フレックス コンテナの主軸はテキストの方向と同じになるように定義されます。スピンドルの開始とスピンドルの終了はコンテンツと同じ方向になります。

価値

.flex-container {
  -webkit-flex-direction: row; /* Safari */
  flex-direction: row;
}

レンダリング

カバー

行反転

性能はrowと同じですが、主軸の始点と終点が入れ替わります。

価値

.flex-container {
  -webkit-flex-direction: row-reverse; /* Safari */
  flex-direction: row-reverse;
}

レンダリング

カバー

カラム

フレックスコンテナの主軸とブロック軸は同じです。スピンドルの始点はスピンドルの終点、書き込みモードの前後の点と同じです。

価値

.flex-container {
  -webkit-flex-direction: column; /* Safari */
  flex-direction: column;
}

レンダリング

カバー

列反転

性能はコラムと同じですが、主軸の始点と主軸の終点が入れ替わります。

価値

.flex-container {
  -webkit-flex-direction: column-reverse; /* Safari */
  flex-direction: column-reverse;
}

レンダリング

カバー

デフォルト値:row

フレックスラップ

この属性は主に、コンテナ内の項目をラップするかどうかを設定するために使用されます。

ナラップ

価値

.flex-container {
  -webkit-flex-wrap: nowrap; /* Safari */
  flex-wrap: nowrap;
}

レンダリング

カバー

包む

価値

.flex-container {
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap: wrap;
}

レンダリング

カバー

ラップリバース

価値

.flex-container {
  -webkit-flex-wrap: wrap-reverse; /* Safari */
  flex-wrap: wrap-reverse;
}

レンダリング

カバー

デフォルト値:nowrap

フレックスフロー

flex-flow は、flex-direction と flex-wrap を組み合わせたものです。

価値観

.flex-container {
  -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */
  flex-flow:         <flex-direction> || <flex-wrap>;
}

デフォルト値:row nowrap

コンテンツの正当化

justify-content主にスピンドルを内側にしっかりと配置するために使用されますflex items。容器

フレックススタート

価値

.flex-container {
  -webkit-justify-content: flex-start; /* Safari */
  justify-content: flex-start;
}

レンダリング

カバー

フレックスエンド

価値

.flex-container {
  -webkit-justify-content: flex-end; /* Safari */
  justify-content: flex-end;
}

レンダリング

カバー

中心

価値

.flex-container {
  -webkit-justify-content: center; /* Safari */
  justify-content: center;
}

レンダリング

カバー

間のスペース

価値

.flex-container {
  -webkit-justify-content: space-between; /* Safari */
  justify-content: space-between;
}

レンダリング

カバー

周囲の空間

価値

.flex-container {
  -webkit-justify-content: space-around; /* Safari */
  justify-content: space-around;
}

レンダリング

カバー

デフォルト値:flex-start

アイテムの整列

flex items主軸のみの場合一排、このプロパティは主に軸上の配置align-itemsを設定するために使用されます。交叉轴flex items

ストレッチ

価値

.flex-container {
  -webkit-align-items: stretch; /* Safari */
  align-items: stretch;
}

レンダリング

カバー

フレックススタート

価値

.flex-container {
  -webkit-align-items: flex-start; /* Safari */
  align-items: flex-start;
}

レンダリング

カバー

フレックスエンド

価値

.flex-container {
  -webkit-align-items: flex-end; /* Safari */
  align-items: flex-end;
}

レンダリング

カバー

中心

価値

.flex-container {
  -webkit-align-items: center; /* Safari */
  align-items: center;
}

レンダリング

カバー

ベースライン

価値

.flex-container {
  -webkit-align-items: baseline; /* Safari */
  align-items: baseline;
}

レンダリング

カバー

デフォルト値:stretch

コンテンツの整列

flex items主軸多排(只有一排时此属性不起作用)の場合、プロパティは主に軸上の配置align-contentを設定するために使用されます。交叉轴flex items

ストレッチ

価値

.flex-container {
  -webkit-align-items: stretch; /* Safari */
  align-items: stretch;
}

レンダリング

カバー

フレックススタート

価値

.flex-container {
  -webkit-align-items: flex-start; /* Safari */
  align-items: flex-start;
}

レンダリング

カバー

フレックスエンド

価値

.flex-container {
  -webkit-align-items: flex-end; /* Safari */
  align-items: flex-end;
}

レンダリング

カバー

中心

価値

.flex-container {
  -webkit-align-items: center; /* Safari */
  align-items: center;
}

レンダリング

カバー

間のスペース

価値

.flex-container {
  -webkit-align-items: space-between; /* Safari */
  align-items: space-between;
}

レンダリング

カバー

周囲の空間

価値

.flex-container {
  -webkit-align-items: space-around; /* Safari */
  align-items: space-around;
}

レンダリング

カバー

デフォルト値:stretch

注文

order容器デフォルトの並べ替え順序を変更するために使用されます项目。

価値

.flex-item {
  -webkit-order: <integer>; /* Safari */
  order: <integer>;
}

レンダリング

カバー
flex-item の値を変更することで、orderその値に応じて flex 項目を並べ替えることができます。

デフォルト値:0

フレックスグロー

flex-growこのプロパティのデフォルト値は、00 の場合、flex-container余分なスペースがたくさん残っていますが、現在のプロパティは余分なスペースflex-itemを埋めるために自動的に拡大または縮小されません。flex-container

実際、このように要約できます。属性値は、flex-grow他の兄弟ビューと比較して、自動的に埋められるflex-container残りのスペースの割合を決定します。

価値観


.flex-item {
  -webkit-flex-grow: <number>; /* Safari */
  flex-grow:         <number>;
}

itemすべてが同じ値を持つ場合flex-grow、それらは同じスペースを占有します。
カバー

下図の 5 つの比例関係はflex-item次のとおりです。1:3:1:1:1

カバー

デフォルト値:Default value: 0

フレックスシュリンク

flex-shrink属性はflex-growその逆です。デフォルト値は です。スペースが十分でない0場合でも縮小は許可されません。値が正以外の数値の場合は、他の値に対する現在の縮小率を示します。flex-containerflex-shrink0flex-item兄弟item

価値


.flex-item {
  -webkit-flex-shrink: <number>; /* Safari */
  flex-shrink: <number>;
}

以下の図の値 (デフォルト値) を除いて、その他はすべて であると2仮定すると、スペースが不足してもサイズは小さくならず、他の兄弟ビューも比例して縮小されます。flex-shrink012

カバー

デフォルト値:1

フレックスベース

特定の項目の主軸上のサイズ、またはitem主軸とサイズのflex-container比例関係を指定します。

価値

.flex-item {
  -webkit-flex-basis: auto | <width>; /* Safari */
  flex-basis:         auto | <width>;
}

レンダリング

カバー

デフォルト値:auto

フレックス

flexはflex-grow、flex-shrinkとの略語でflex-basis、autoと同等1 1 auto、noneと同等です0 0 auto。

.flex-item {
  -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */
  flex:         none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}

デフォルト値:0 1 auto

整列自己

align-selfこれは主に、flex-container上記の属性によりalign-items自分自身の状態が変更されたが、自分自身の状態を他の兄弟ビューの状態とは異なるようにしたい場合に使用され、align-self独自の状態を使用して設定できます。

.flex-item {
  -webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

デフォルト値:auto

おすすめ

転載: blog.csdn.net/liyuechun520/article/details/75174590
おすすめ
大規模な言語モデルに基づくオープンソースのナレッジベースの質問と回答システムである MaxKB GitHub Star の数が 5,000 を超えました。
ランキング
短线选股的一种方法
Javaクライアントでのユーバーのリズムワークフローで睡眠時間をキャンセルし、再スケジュール
CALIPSOデータバッチダウンロード方式
LeetCode アルゴリズム再帰クラス - ソードはオファー 26 を参照します。 ツリーの部分構造
HTMLのインポート外部CSS、JavaScriptの論文
PostgreSQL 13.1、12.5、11.10、10.15、9.6.20、および9.5.24がリリースされました
アップルは、エラーメッセージがポテトに接続されていた実行する方法ポテトポテトショーをダウンロードすることができません
あなたは空腹で突然電話を切っていますか？これはテクノロジーの裏側ですか、それともテスト用の銃ですか？
VIMエディタのヒント
動的計画法の最長共通部分列（LCS）
アーカイブ
もっと
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)

コードワールド

© 2018 codetd.com