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 を使用するための不完全なソリューション
推薦する
MySQL ビューの原則と使用例の概要
この記事では、MySQL ビューの原理と使用法についてまとめます。ご参考までに、詳細は以下の通りです...
CSS コード省略 div+css レイアウト コード省略仕様
略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSS 省略形の主なル...
Linux システムで Java 環境変数を設定する方法
Java環境変数を設定するここで、環境変数は etc/profile に設定され、つまり、すべてのユ...
Nginx リバース プロキシから go-fastdfs へのケースの説明
背景go-fastdfs は、http プロトコルをサポートする分散ファイルシステムです。一般的なプ...
ネイティブWeChatアプレット開発におけるreduxの使用の詳細な説明
前提複雑なシナリオでは、複数の異なるページ間で大量のデータを使用したり変更したりする必要があります。...
Ansibleを使用してTomcatをバッチでデプロイする方法
1.1 ディレクトリ構造の構築この操作は、nginx+mysql+tomcat+dbのディレクトリ構...
MySQL ファジークエリステートメントコレクション
SQL ファジークエリステートメント一般的なファジーステートメントの構文は次のとおりです。 SELE...
フロントエンドの上級者向けコースでは、JavaScript のストレージ機能の使い方を学習します。
目次序文背景実施計画の考え方js ストレージ機能ソリューション設計やっと要約する序文どの SaaS ...
vite+vue3+element-plus プロジェクトをビルドする手順
viteを使用してvue3プロジェクトを構築するターミナルで次のコマンドを実行すると、Vite を使...
ins タグと del タグの属性と使用法
insとdel は、HTML 4.0 で導入され、文書の作成時に作成者が共同作業できるようにし、また...
Docker で MySQL をデプロイする詳細なプロセス (Docker でデプロイされる一般的なアプリケーション)
以前にも紹介しました: docker (一般的なアプリケーションのデプロイ): docker dep...
Docker Compose ネットワーク設定の説明
基本概念デフォルトでは、Compose はアプリケーション用のネットワークを作成し、サービスの各コン...
Vue.js プロジェクトの開始方法
目次1. Node.jsとVue 2. ローカル開発環境でフロントエンドのVueプロジェクトを実行す...
Linux での sshd サービスとサービス管理コマンドの詳細な説明
sshd SSH は Secure Shell の略で、アプリケーション層のセキュリティ プロトコル...
プライベートウェアハウス（レジストリとハーバー）を構築するためのDockerの実装
使用される Docker イメージが増えるにつれて、イメージを保存する場所、つまりウェアハウスが必要...