CSSのdisplay:flex||inline-flexプロパティの詳しい説明-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSのdisplay:flex||inline-flexプロパティの詳しい説明

巴扎黑

May 16, 2018 am 09:12 AM

cssdisplayflex

この記事では主に、CSS の display:flex プロパティと display:inline-flex プロパティについて紹介します。この記事では、2 つのサンプルコードを通じて、display:flex と display:inline-flex の使用効果を紹介します。参照できますので、以下を見てみましょう。

はじめに

FlexとはFlexible Boxの略で、「柔軟なレイアウト」を意味し、箱型のモデルに最大限の柔軟性を提供するために使用されます。任意のコンテナを Flex レイアウトとして指定できます。

flex: オブジェクトをフレキシブルボックスとして表示します

inline-flex: オブジェクトをインラインブロックレベルのフレキシブルボックスとして表示します

flexサンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
  <style type="text/css">
    .main{
      width:200px;
      background-color: red;
      display: flex;/*父p设置该属性*/
    }
    .main>p{
      width: 50px;
      height: 50px;
      border: 1px solid blue;
      box-sizing: border-box;/*这是css3属性，如果不懂，请继续往下阅读*/
      /*float:left;这个属性就不需要了，会自动浮动*/
    }
  </style>
</head>
<body>
  <p class="main">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
  </p>
</body>
</html>

レンダリングは次のとおりです:

display:inline-flexサンプルコード

効果を確認したい場合は、上記のdisplay:flexをdisplay:inline-flexに置き換えて、width:200pxを削除してください。テストする前は、.main が行全体を占めるのではないかと思う人もいるかもしれませんが、テストの結果は、すべてのサブ要素の p サイズに応じて幅と高さが調整されるということです

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
  <style type="text/css">
    .main{
      background-color: red;
      display: inline-flex;/*父p设置该属性*/
    }
    .main>p{
      width: 50px;
      height: 50px;
      border: 1px solid blue;
      box-sizing: border-box;/*这是css3属性，如果不懂，请继续往下阅读*/
      /*float:left;这个属性就不需要了，会自动浮动*/
    }
  </style>
</head>
<body>
  <p class="main">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
  </p>
</body>
</html>

効果の図は次のとおりです。 :

以上がCSSのdisplay:flex||inline-flexプロパティの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

柔軟なキャプション付きスラント画像Apr 12, 2025 am 09:31 AM

この傾斜した画像の行を作成するためのエリックマイヤーのチュートリアルの最終結果は、かなり上品です。しかし、それは目的地よりも旅についての方が多いです（そこに

CSSのステップで値を変更しますApr 12, 2025 am 09:28 AM

実際にはCSSにはステップ（）関数がありますが、アニメーションにのみ使用されます。たとえば、あなたは高さで成長することを許可している要素を伝えることができますが、

グリッドの密集したキーワードの自動流出能力Apr 12, 2025 am 09:23 AM

ニュースWebサイトのホームページに取り組んでいると言わせてください。あなたはおそらくグリッドレイアウトでいくつかのカードベースのコンテンツを見るのに使用されていましたよね？ここに＆＃039;は古典です

これを使用しますApr 12, 2025 am 09:22 AM

これを使用している私との少しのインタビュー。あなたは私が誰であるかを知っているので、私はイントロをスキップしますが、私はここで残りを再発行します。

スクロール上のテキストをアニメーション化しますApr 12, 2025 am 09:18 AM

楽しいニューヨークタイムズの記事が出てきたとき、湾曲したテキストをアニメーション化するというアイデアを取り上げました。私がしたのは、彼らがどのようにしたかを覗き込んで抽出することだけでした

雪だるまApr 12, 2025 am 09:17 AM

雪だるま。その名前が大好きです。これは、何かに取り組んでいるピカの人々からの新しいものです。ある意味では、バンドラーの代替品です。パッケージ上で実行されます

NetNewswireとFeedbinApr 12, 2025 am 09:15 AM

Netnewswireは、2002年にデビューする古典的なRSSアプリの1つです。5.0が5.0になって、2019年8月にオープンソースを受けたとき、私はかなり興奮しました！あなたはそれを正しく引っ掛けることができます

Proseate DrawingをWebアニメーションに変える方法Apr 12, 2025 am 09:14 AM

私は最近、Apple Pencilを使用したProcreateアプリを使用してiPadに描画を始めました。このように描く柔軟性を楽しんでいます。通常私を妨げるもの

See all articles

ホットAIツール

ホットツール

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。