使用
弾性ボックスモデルの説明
よく使われるプロパティ flex-direction (フレキシブルコンテナ内のサブ要素の配置を指定します) 行のデフォルト値。要素は行として水平に表示されます。 row-reverse 逆の順序。 列要素は列として垂直に表示されます。 column-reverse 列と同じですが、順序が逆になります。 flex-wrap (このプロパティは、フレックス コンテナーが 1 行か複数行かを指定し、交差軸の方向によって新しい行が積み重ねられる方向が決まります。) nowrap のデフォルト値。要素を行または列に分割しないことを指定します。 wrap は、必要に応じて要素を行または列に分割することを指定します。 wrap-reverse は、必要に応じて要素が行または列内で逆の順序で折り返されることを指定します。 align-items プロパティは、フレックス コンテナーの現在の行の垂直軸方向におけるフレックス アイテムの配置を定義します。つまり、上行と下行のスタイルを指定します。 ストレッチ デフォルト値。アイテムはコンテナに収まるように引き伸ばされます。 center アイテムはコンテナの中央に配置されます。 flex-start 項目はコンテナーの先頭に配置されます。 flex-end アイテムはコンテナーの最後に配置されます。 ベースライン アイテムはコンテナのベースラインに配置されます。 justify-content は、フレキシブル ボックス要素の主軸 (交差軸) 方向の配置を設定または取得するために使用されます。 flex-start 項目はコンテナーの先頭に配置されます。 flex-end アイテムはコンテナーの最後に配置されます。 center アイテムはコンテナの中央に配置されます。 space-between 項目は、行間にスペースを空けてコンテナ内に配置されます。 space-around 項目は、各行の前、行間、行の後にスペースを置いてコンテナー内に配置されます。 柔軟な子要素のプロパティ 1.order属性 .flex-container .flex-item { order: <整数>; } <integer>: 整数値を使用してソート順序を定義します。値が小さいほど先頭になります。負の値も指定できます。デフォルトは 0 です。 2.align-self は、弾性ボックス要素自体の交差軸(垂直軸)方向の配置を設定または取得します。 (align-items と同様) 以上がCSS3エラスティック拡張ボックスの詳しい説明です。CSS3エラスティック拡張ボックスの詳細については、123WORDPRESS.COMの他の関連記事にも注目してください。 |
<<: RabbitMQ の Docker インストールと設定手順
>>: 重複したMySQLレコードを現場でチェックし、処理する実践的な記録
今日、IE8 をインストールしました。ダウンロードするために Microsoft の Web サイト...
目次1. Dockerファイル2. pom 構成3. イメージプッシュ4. k8s デプロイメント前...
この記事では、ソーシャル ウェブサイトのホームページを比較分析することで洞察を得て、ソーシャル ウェ...
目次1. 基本2. 問題の説明3. 解決策付録: js を使用して Excel の日付形式を変換する...
目次1. 概念をすぐに認識する: 2. ローカルフィルター: 3. グローバルフィルター: 4. 拡...
この記事では、カスタムツリーコンポーネントを再帰的に実装するVueの具体的なコードを参考までに共有し...
1. Pythonのインストール1. フォルダーを作成します。 mkdir python フォルダ...
開発およびデバッグのプロセスでは、新しいコードと古いコードの違いを比較する必要があります。比較には、...
目次なぜマテリアルライブラリが必要なのでしょうか?材質は何ですか?素材の種類fuep、vue3 ベー...
質問:オリジン サーバーはターゲット リソースの表現を見つけることができないか、既存の表現を公開した...
ヒント:配列変更メソッドによりv-forが更新され、ページが更新されます。配列を変更しないメソッド:...
この記事では、例を使用して、CentOS プラットフォーム上で LAMP 環境を迅速に構築する方法に...
この記事では主に、CSS3 フレックスレイアウトを使用して要素を均等に配置する方法を紹介します。自分...
ただし、デフォルトの src を持つ <img> 要素を使用してスクロール読み込み効果を...
実際に参加したプロジェクトでは、MySQL テーブルのデータ量が数百万に達すると、通常の SQL ク...