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 を使用するための不完全なソリューション
推薦する
Linux C バックグラウンドサービスプログラムの単一プロセス制御の実装
導入通常、バックグラウンド サーバー プログラムには 1 つのプロセスのみが必要ですが、単一のプロセ...
MySQLでビューを作成する方法
基本的な構文CREATE VIEW ステートメントを使用してビューを作成できます。構文の形式は次のと...
CentOS に MySQL をインストールしてリモート アクセスを設定する方法
1. MySQLリポジトリソースをダウンロードする$ wget http://repo.mysql....
アイデアはDockerプラグインを使用してワンクリックの自動デプロイを実現します
目次環境： 1. Dockerはリモート接続アクセスを可能にするidea dockerプラグインをイ...
Bootstrap 3.0 学習ノートのボタンとドロップダウン メニュー
前回の記事はBootstrap CSS部分の簡単なレビューであり、多くの詳細が見落とされていました。...
レスポンシブなアコーディオン効果を実現するための CSS3 の詳細な説明
最近、外国人が CSS3 を使用してアコーディオン効果を実現しているビデオを見たので、自分で学習した...
CSS3アニメーションジャミングソリューションについての簡単な説明
なぜ詰まっているのでしょうか?言及しなければならない前提があります。フロントエンド開発者は皆、ブラウ...
Docker Machineの詳細な説明
Docker と Docker Machine の違いDocker はクライアント サーバー アーキ...
Linux で Jenkins プロジェクトを構築するプロセス (CentOS 7 を例に)
https://gitee.com/tengge1/ShadowEditor のデプロイメントを例...
MySQL クエリのソートとクエリ集計関数の使用法の分析
この記事では、例を使用して、MySQL クエリのソート関数とクエリ集計関数の使用方法を説明します。ご...
MySQL 起動エラーを解決する: エラー 2003 (HY000): 'localhost' の MySQL サーバーに接続できません (10061)
このエラーは初心者によく発生します。この記事では主に、エラー 2003 (HY000): '...
MySQLクエリステートメントの簡単な操作例
この記事では、例を使用して、MySQL クエリ ステートメントの簡単な操作を説明します。ご参考までに...
Vueコンポーネント通信のさまざまな方法の詳細な説明
目次1. 父から息子へ2. 息子から父へ3. 親子関係のないコンポーネントの値の転送4. ヴュークス...
Dockerボリューム削除操作
プルーンこのコマンドを使用するには、クライアントとデーモンの両方の API バージョンが少なくとも ...
Centos7でのパーティションのフォーマットとマウントの実装
Linux では、ハードディスクの追加やパーティションの再マウントといった状況に頻繁に遭遇します。こ...