CSSでフレックス配置を表示する（レイアウトツール）
|
display: flex レイアウトに関しては、深く理解している人もいますし、私も他の人の作業から学びました。 display: フレックス レイアウトが何であるか、またはその基本的な概念が何であるかはわかりませんが、使い方はわかります。コンセプトのようなものを目にしたときは、いつもざっと目を通すだけです。 最初のプロパティと使用法: flex-direction 私が知っている方法は4つあります：row（水平配置）、row-reverse（水平逆配置）、column（垂直配置）、column-reserve（垂直逆配置）
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="UTF-8">
<タイトル></タイトル>
</head>
<本文>
<div style="width:300px;border:1px solid red;display: flex;flex-direction: row;">
<div スタイル="幅: 100px;高さ: 100px;背景色: 黒;"></div>
<div スタイル="幅: 100px;高さ: 100px;背景色: 緑;"></div>
<div スタイル="幅: 100px;高さ: 100px;背景色: 黄色;"></div>
<div スタイル="幅: 100px;高さ: 100px;背景色: 青;"></div>
</div>
</本文>
</html>
上記のコードと効果図は、属性が行の場合の効果です。 注: 幅は設定されていますが、親コンテナは300pxのみで、子divは100pxに達することはできませんが、親コンテナに適応します。 異なる効果を得るには、flex-direction: row コードを flex-direction: row-revese または flex-direction: column または flex-direction: column-reserve に置き換えます。 効果図は次のとおりです。
逆行する -------
カラム -------
列反転 ------- 2番目のプロパティと使用法: flex-wrap 改行プロパティは次のとおりです: nowrap (改行なし)、wrap (改行)、wrap-reverse (方向改行)
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="UTF-8">
<タイトル></タイトル>
</head>
<本文>
<div style="width:300px;border:1px solid red;display: flex;flex-wrap: wrap;">
<div スタイル="幅: 100px;高さ: 100px;背景色: 黒;"></div>
<div スタイル="幅: 100px;高さ: 100px;背景色: 緑;"></div>
<div スタイル="幅: 100px;高さ: 100px;背景色: 黄色;"></div>
<div スタイル="幅: 100px;高さ: 100px;背景色: 青;"></div>
</div>
</本文>
</html>
これは改行のコードと効果の図です ------- flex-wrap: wrap プロパティを nowrap (改行なし) と wrap-reverse (方向改行) に置き換えると、次の効果が得られます。
ナウラップ -----
折り返し反転 --------- 3番目の属性と使用法: justify-content プロパティが含まれています: flex-start（デフォルト）：左揃え。
左揃え flex-end: 右揃え
右揃え center: 中央揃え;
中央揃えのスペース間: 項目間の間隔を等しくして両端を揃えます。
配置スペース: 各項目の両側の間隔は等しくなります。つまり、項目間の間隔は、項目と境界線の間の間隔の 2 倍になります。
両者の距離は同じです。私、小白もそこからたくさんのものを盗みました。 要約する 以上がCSSでフレックス編成（レイアウトツール）を表示するためのエディターの紹介です。参考になれば幸いです！ |
<<: Vue プロジェクトで SVG コンポーネントをパッケージ化して構成する手順
>>: 入力タイプ=テキスト値=str を使用するための不完全なソリューション
推薦する
CSSアニメーションとSVGを組み合わせてエネルギーの流れの効果を作成する
最終的な効果は次のようになります。アニメーションは2つのステップに分かれていますランニング軌道を開発...
Vueのよく使われる組み込み命令の詳細な説明
<本文> <div id="ルート"> <h1 ...
Nexus を使用して jar パッケージをプライベート サーバーに追加する方法
なぜ Nexus プライベート サーバーを構築する必要があるのでしょうか。その理由は非常に簡単です。...
HTMLフォームタグチュートリアル（1）：
フォームは、動的な Web ページを実装するための主要な外部フォームです。フォームとフォーム フィー...
MySQL の遅いクエリの最適化方法と最適化の原則
1. 日付のサイズを比較するには、XML に渡される日付形式は 'yyyy-MM-dd...
MySQL Innodb インデックス メカニズムの詳細な紹介
1. インデックスとは何ですか?インデックスは、ストレージ エンジンがレコードをすばやく検索するため...
ウェブデザインのためのロイヤルブルーのカラーマッチング入門
古典的な色の組み合わせは力と権威を伝え、強いロイヤルブルーはあらゆる古典的な色の組み合わせの中心的な...
Vuex全体のケースの詳細な説明
目次1. はじめに2. 利点3. 使用手順1. Vuexをインストールする2. Vuexを参照する3...
ウェブページのコメントにより IE でテキストがオーバーフローする
実験コードは次のとおりです。 </head> <body> <div ...
VMware Workstation と vSphere 間で仮想マシンを移行する (画像とテキスト)
1. Workstationで仮想マシンのハードウェアバージョンを変更するWorkstation ...
Web 上の要素を非表示にする方法とその利点と欠点
ソースコードの例: https://codepen.io/shadeed/pen/03caf6b36...
アイデアを使用して Springboot 初期化サーバーを構築する際の問題分析
問題の説明最近、Springbootプロジェクトを構築していたところ、会社のネットワークケーブルに接...
PrometheusはGrafanaディスプレイを使用してMySQLを監視します
目次Prometheusはエクスポーターを介してMySQLを監視し、Grafanaチャートで表示しま...
一般的でない js 演算演算子の概要
目次2. カンマ演算子3. JavaScript Null 結合演算子 (??) 4. JavaSc...
MySQLデータベーステーブルの定期バックアップの実装の詳細な説明
Mysqlデータベーステーブルの定期的なバックアップの実装0. 背景実際の開発環境では、フロントエン...