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 を使用するための不完全なソリューション
推薦する
Centos7.4 サーバーへの Apache のインストールとインストール プロセス中に発生した問題の解決策
この記事では、CentOS 7.4 サーバーに Apache をインストールする方法と、インストール...
Web ベースの電子メール コンテンツの HTML フォーマット標準の概要
1. ページ要件1) 標準のヘッダーとフッターを使用するXML/HTML コードコンテンツをクリップ...
ディスクを破壊せずに Linux で dd コマンドを使用する方法
故障したストレージ ドライブからデータを救出する場合でも、アーカイブをリモート ストレージにバックア...
Vue ショッピングカートのケーススタディ
目次1. ショッピングカートの例2. コードの実装3. まとめ1. ショッピングカートの例一連の学習...
JS ES6における構造化分解についてお話しましょう
概要es6 では、配列またはオブジェクトから指定された要素を取得する新しい方法が追加されました。これ...
React Native APPのアップデートに関する簡単な説明
目次アプリ更新プロセス大まかなフローチャートアプリ情報の更新1. まず取得する必要があるファイルアド...
Mysql 中国語ソートルールの説明
MySQL を使用する際、フィールドをソートしたりクエリしたりすることがよくあります。通常は、中国語...
Docker のホスト間コンテナ通信オーバーレイ実装プロセスの詳細な説明
サーバーも 2 つあります。準備：コンテナのホスト名を設定する consul: kv タイプのストレ...
Tomcat でサーブレット URL パターンを構成する際の問題の詳細な説明
tomcat の web.xml を構成する場合、サーブレットは比較的重要な問題です。ここでは、サー...
Vueプロジェクトウォッチで関数が繰り返しトリガーされる問題の解決
目次問題の説明:解決策1解決策2問題の説明:ページ A と B の 2 つがあり、各ページにはget...
Workermanはmysql接続プールのサンプルコードを書きます
まず、接続プールを使用する理由と、接続プールによってどのような問題が解決できるかを理解する必要があり...
HTML テーブル マークアップ チュートリアル (18): テーブル ヘッダー
<br />ヘッダーはテーブルの最初の行を参照します。ヘッダー内のテキストは中央揃えで太...
XHTML コードで Marquee タグを使用する方法
フォーラムで、ネットユーザーの jeanjean20 が、Marquee を標準に適合させる方法につ...
Js でオブジェクトのディープ オブジェクトを安全に取得するメソッドの例
目次序文文章パラメータ例Lodash 実装:トーキー機能: castPath関数: stringTo...
Linux サーバーでフォルダー、ファイル、解凍コマンドを削除する方法
1. フォルダを削除する例: rm -rf /usr/java /usr/javaディレクトリとその...