CSS の flex と inline-flex の違いの詳細な説明
|
inline-flex は inline-block と同じです。内部要素用の display:flex コンテナであり、外部要素用のインライン ブロックです。 両者の違いの説明:
一言で言えば、Flex Box コンテナーに幅のサイズ制限が設定されていない場合、display が flex として指定されると、FlexBox の幅が親コンテナーを埋め尽くし、display が inline-flex として指定されると、FlexBox の幅が子アイテムを囲みます (次の図を参照)。
対応するコードは次のとおりです。
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8">
<title>タイトル</title>
<スタイル>
/*フレックスコンテナ*/
.flex__コンテナ{
ディスプレイ: インラインフレックス;
背景色: グレー;
}
/*フレックスサブアイテム */
.flex__item {
幅: 50px;
高さ: 50px;
背景色: 水色;
境界線: 1px 黒一色;
}
</スタイル>
</head>
<本文>
<!--フレックスコンテナ-->
<div class="flex__container">
<!--Flex コンテナ内のサブアイテム-->
<div class="flex__item"></div>
<div class="flex__item"></div>
<div class="flex__item"></div>
<div class="flex__item"></div>
</div>
</本文>
</html>CSS の flex と inline-flex の違いに関するこの記事はこれで終わりです。CSS flex と inline-flex の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
推薦する
CSS で複数の境界線を実装するためのヒント
1. 複数の国境[1]背景: ボックスシャドウ、アウトライン使用シナリオの多様性を考慮すると、複数の...
Tomcat Nginx Redis セッション共有プロセス図
1. 準備ミドルウェア: Tomcat、Redis、Nginx Jar パッケージ: commons...
有名ウェブサイトのロゴにおすすめのフォント40選
世界で最も有名なウェブサイトのロゴデザインにはどんなフォントが使われているかご存知ですか?これらのフ...
CSS は Alibaba ベクター ライブラリを使用して、対応する位置に見栄えの良いアイコン効果をすばやく追加します (サンプル コード)
Alibaba ベクターアイコンライブラリにアクセスAlibaba ベクターアイコンライブラリ好き...
Vue の nextTick について話す
データが変更されても、DOM ビューはすぐには更新されません。変更直後にノードまたはその値を取得しよ...
jQueryは居住地を選択するためのドロップダウンボックスを実装します
居住地を選択するためのドロップダウンボックスをjQueryで実装するための具体的なコードは参考までに...
MySQLクエリインターセプトの詳細な分析
目次1. クエリの最適化1. MySQLチューニングの概要2. 小さなテーブルが大きなテーブルを動か...
CSSを使用してダークモードとブライトモードを切り替える
Web Skills第5号では、CSSでダークモードやハイライトモードを実装するための技術的なソリュ...
Linux での crontab スケジュール実行コマンドの詳細な説明
LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | grep ...
ドメイン名、ポート、異なるIPに基づくnginx仮想ホスト設定の実装
1. nginx仮想ホストの設定仮想ホストを使用すると、実行する Web サイトごとに個別の Ngi...
mysqlはルートユーザーと一般ユーザーを作成し、機能を変更および削除します。
方法1: SET PASSWORDコマンドを使用する mysql -u ルート mysql> ...
LinuxでIPアドレスが表示されない問題の解決方法
目次序文解決：ステップ1ステップ2序文環境: VMware Workstation 上に Linux...
MySQLのよくある間違い
NULL 値によると、MySQL の NULL 値は単にデータがないことを意味します。NULL 値は...
HTML リスト ボックス、テキスト フィールド、ファイル フィールドのサンプル コード
ドロップダウンボックス、テキストフィールド、ファイルフィールド 上半分はデモンストレーション効果、下...
HTMLページがincludeを使用してphpファイルをインポートした後に余分な空白行があります
インターネットで見つけた方法は効果的ですinclude によって導入されたフッター ファイルとヘッダ...