基本的な紹介 特徴
仕組み 親要素の 互換性 フレックスコンテナ まず、最も単純な flex の例を見てみましょう。外側の div は html: <div class="flex-container"> <div class="ボックス 1"></div> <div class="box two"></div> <div class="box three"></div> </div> css: .flex-container{ 最大幅: 960px; マージン: 0 自動; ディスプレイ:flex; } .box{ 高さ: 100px; 最小幅: 100px; } .one{ 背景: ピンク; } .two{ 背景: ライトグリーン; } .three{ 背景: スカイブルー; } 効果: 効果はフローティング レイアウトに似ていますが、フローティングを使用して実装する場合はより多くのコードを記述する必要がありますが、flex では 1 行で実行できます。 1. コンテンツの正当化 フレックス アイテムを中央揃えにしたい場合は、フレックス コンテナーに CSS プロパティ .flex-コンテナ{ ... コンテンツの中央揃え: 中央; } 効果は以下のようになります。 さらに、 2. アイテムを揃える フレックス方向の中央揃えが実現された後、 CS: ... .flex-コンテナ{ 最大幅: 960px; マージン: 0 自動; ディスプレイ:フレックス; コンテンツの中央揃え: 中央; 高さ: 200px; 背景色: 白; アイテムの位置を中央揃えにします。 } 効果: flex を使用すると、CSS での垂直方向の中央揃えの複雑な問題が解決されます。同様に、 3. フレックス方向
CS: ... .flex-コンテナ{ ... flex-direction: 列; アイテムの位置を中央揃えにします。 } 効果: 4. フレックスラップ ウィンドウが狭くなったときにフレックスアイテムを圧縮せず、境界を越えたフレックスアイテムを折り返したい場合は、フレックスコンテナの .flex-コンテナ{ 最大幅: 960px; マージン: 0 自動; ディスプレイ:フレックス; flex-wrap: ラップ; } 。箱{ 高さ: 100px; 最小幅: 300px; フレックス成長: 1; } ウィンドウを圧縮すると、次のような効果が得られます。 Flex wrap には このことから、flex wrap はある程度メディアクエリを置き換えることができることがわかります。 5. フレックスロウ 最後に、 フレックスアイテム 1. フレックスグロー 上記のすべての例では、3 つのフレックス アイテムはフレックス コンテナーの小さな部分のみを占めています。フレックス アイテムでフレックス コンテナーを埋め尽くしたい場合は、フレックス アイテムに CSS を次のように変更します。 。箱 { 高さ: 100px; 最小幅: 100px; フレックス成長:1; } 効果: この時点で CS: ... .box{ 高さ: 100px; 最小幅: 100px; } .one{ 背景: ピンク; flex-grow: 1; } 効果: このとき、2 と 3 のサイズは変更されず、1 が親要素の残りのスペースを占有します。 1 の css: .box{ 高さ: 100px; 最小幅: 100px; flex-grow:1; } .one{ 背景: ピンク; flex-grow: 2; } 効果: 1 の幅が 2 と 3 の 2 倍になっていることがわかります。つまり、フレックス アイテムのサイズは 2. フレックスシュリンク
ボックスの幅をフレックス コンテナーの 1/3 に変更し、1、2、3 の .box{ 高さ: 100px; 幅: 320px; } .one{ 背景: ピンク; flex-shrink: 1; } .two{ 背景: ライトグリーン; flex-shrink: 2; } .three{ 背景: スカイブルー; flex-shrink: 3; } ウィンドウが通常のサイズの場合、効果は次のようになります。 ウィンドウを圧縮して狭くすると、次のような効果が得られます。 フレックス コンテナーの幅が 540 ピクセルになると、子要素はさまざまな程度に圧縮されます。 1、2、3 の圧縮された幅はそれぞれ 250px、180px、110px です。したがって、最初の幅 320px と比較すると、圧縮された幅はそれぞれ 70px、140px、210px になります。70 flex の縮小が fs ∝ is/ss 3. フレックスベース flex-basis は、フレックス アイテムの初期の幅と高さを設定するために使用されます。すでに幅と高さがあるのに、なぜ flex-basis を追加する必要があるのでしょうか? flex-basis と width/height の違いは次のとおりです。
flex-basis の役割を確認し、CSS を次のように変更してみましょう。 。箱{ 高さ: 100px; フレックス成長: 1; } 。1つ{ 背景: ピンク; フレックスベース: 100px; } 。二{ 背景: ライトグリーン; フレックスベース: 200px; } 。三つ{ 背景: スカイブルー; フレックスベース: 300px; } 3 つのフレックス アイテムはすべて、初期幅に同じ幅が追加されます。 もちろん、この例は 4. 注文
html: <セクション id="ブロック"> <div class="one">1</div> <div class="two">2</div> <div class="three">3</div> <div class="four">4</div> </セクション> CS: ... #ブロック{ ディスプレイ: フレックス; マージン: 10px; コンテンツの両端揃え: スペースの間; } #ブロック div{ フレックス: 0 0 100px; パディング: 40px 0; テキスト配置: 中央; 背景: #ccc; } デフォルトの順序は、HTML 内での flex アイテムの表示順序に基づきます。 フレックス アイテムの CS: ... .one{ 順序: 4; } .two{ 順序: 3; } .three{ 順序: 2; } .four{ 順序: 1; } 効果: 結論 これは flex の簡単な紹介です。flex は非常に強力かつシンプルです。ぜひ使って楽しんでいただければ幸いです。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
ページング効果は、参考までにvueプロジェクトに実装されています。具体的な内容は次のとおりです。 1...
この記事の例では、矢印をクリックして画像を切り替えるVue + jsの具体的なコードを共有しています...
mysql が閉じない場合の解決策:コンピュータのタスクバーを右クリックしてタスクマネージャーを開き...
目次1. アプレットのプロジェクト ディレクトリを開き、ファイルの場所を開きます。 2. プロジェク...
ユーザーの権限に応じて異なるメニュー ページを表示します。知識ポイントルートガード(事前ガードを使用...
目次1. パーティクルエフェクト2. シーンを読み込む3. さまざまな粒子効果の実現エンディング: ...
序文最近、私の住居の電力事情が不安定で、突然の停電が頻繁に起こります。ノートパソコンを持っているので...
目次導入アイデアID配列インデックスのマッピング関係を確立するツリー構造の構築原理要約する導入組織階...
背景Alibaba Cloud RDS for MySQL(MySQL バージョン 5.7)データベ...
MySQL 8.0.13 のインストールと設定方法を皆さんと共有したいと思います。お役に立てれば幸...
背景開発中、特定の状況でビジネス ロジックをバッチ処理するためのスクリプトが必要になる場合があります...
テーブルヘッダーでは、暗い境界線の色を個別に定義できます。基本的な構文<TH 境界線の色を暗く...
注: sg11 弊社では Linux システム仮想ホストのセルフインストールのみサポートしております...
目次最初の方法: MySQLデータベースが接続されていない場合2 番目の方法: データベースがすでに...
コンセプトMMM (Mysql のマスター マスター レプリケーション マネージャー) は、Perl...