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 を使用するための不完全なソリューション
推薦する
CentOS6.7 mysql5.6.33 でデータファイルの場所を変更する方法
問題: MySQL がデータ ファイルを保存するパーティションの容量が小さく、現在いっぱいになってい...
Dockerコンテナを介してランプアーキテクチャを構築するプロセス
目次1. Centosイメージを取得する2. nginxイメージをビルドする3. MySQLイメージ...
CSS3 で実装された価格表
結果： 実装コードhtml <div id="価格表" class=&qu...
CentOSバージョンにDockerをインストールする際のエラーの解決方法
1. バージョン情報 # cat /etc/system-release CentOS Linux ...
explainコマンドがMySQLデータを変更する理由
クエリで EXPLAIN を実行するとデータベースが変更されるかどうかを尋ねられた場合、おそらく「い...
Vue プロジェクトはファイルダウンロードの進行状況バー機能を実装します
日常業務でファイルをダウンロードする一般的な方法は 2 つあります。 1 つ目は、サーバーのファイル...
Vue ショッピングカートのケーススタディ
目次1. ショッピングカートの例2. コードの実装3. まとめ1. ショッピングカートの例一連の学習...
Reactコンポーネント通信の詳細な説明
目次コンポーネント通信の概要コンテンツ3つの方法まとめコンポーネントコミュニケーション - 父から息...
Navicat が MySQL にリモート接続するときに発生する 10060 不明エラーを解決する方法
はじめに:今日は、サーバー上のMySQLにリモート接続したいと思います。使用するソフトウェアはNav...
最新バージョンMySQL5.7.19 解凍版インストールガイド
MySQL バージョン: MySQL Community Edition (GPL) ------ ...
MySQLで一意のサーバーIDを生成する方法
序文MySQL では、server-id を使用してデータベース インスタンスを一意に識別し、それを...
Linux で測位バックグラウンド サービスが時々クラッシュする問題の解決方法
問題の説明最近のバックグラウンドサービスでは、特定の命令の要求データをディスクに保存する新しい機能が...
変換を使用して純粋な CSS ポップアップ メニューを実装するためのサンプル コード
序文トップメニューを作成する場合、ポップアップのセカンダリメニューを作成する必要があります。 以前の...
CentOS 8にdockerをインストールする最も詳細な方法
CentOS 8にDockerをインストールする公式ドキュメント: https://docs.doc...
Web デザイン ヘルプ: Web フォント サイズ データ リファレンス
<br />内容はインターネットから転載したものです。どこから見つけたのか忘れてしまいま...