CSS3 フレックスボックスとは何ですか?表示属性におけるflex属性値とbox属性値の違いと使い方-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3 フレックスボックスとは何ですか?表示属性におけるflex属性値とbox属性値の違いと使い方

青灯夜游

Sep 08, 2018 pm 03:42 PM

Web フロントエンド Web ページの開発および設計プロセスでは、レイアウトは非常に重要な部分です。レイアウトは、ページ上のさまざまなコンポーネントや要素のサイズと位置を決定するために使用されます。この章では、CSS3 レイアウトモデルであるフレックスボックスモデル (フレックスボックス) を紹介します。これにより、CSS3 におけるフレックスボックスとは何か、また、フレックスボックスとボックスの属性値の違いと使用法を理解できるようになります。フレックスボックスの表示属性の困っている友人は参考にしていただければ幸いです。

1: フレキシブルボックスとは何ですか
CSS3 フレキシブルボックス (フレキシブルボックスまたはフレックスボックス) は、ページがさまざまな画面サイズやデバイスの種類に適応する必要がある場合に、要素が適切に動作するようにするレイアウト方法です。フレックスボックスレイアウトモデルを導入する目的は、コンテナ内の子要素に空のスペースを配置、整列、割り当てするためのより効率的な方法を提供することです。一般的な複雑なレイアウトのニーズの多くを簡単な方法で満たすことができます。その利点は、開発者が特定の実装方法を指定せずに、レイアウトが持つべき動作を宣言するだけであることです。実際のレイアウトはブラウザーが担当します。このレイアウトモデルは、主要なブラウザでサポートされています。

2: CSS3 フレキシブルボックスのコンテンツ
フレキシブルボックスは、フレキシブルコンテナ (Flex コンテナ) とフレキシブルサブ要素 (Flex アイテム) で構成されます。
フレキシブルコンテナは、display プロパティの値を flex または inline-flex に設定することによって、フレキシブルコンテナとして定義されます。
フレキシブルコンテナには 1 つ以上のフレキシブルサブ要素が含まれます。
注: フレキシブルコンテナの外側とフレキシブルサブ要素の内側は通常どおりレンダリングされます。フレックスボックスは、フレックス子要素がフレックスコンテナ内でどのようにレイアウトされるかを定義するだけです。

3:display:box と display:flex の違いと使い方

1.display:box は主に親コンテナ内の子要素の配置、順序、垂直 (水平) 配置を制御します

display:box は2009 年より前の構文は古いため、対応する接頭辞を使用する必要があります。

互換性コードはおおよそ次のとおりです

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex;

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>弹性盒子--display: box;</title>
		<style>
			.box {
				width: 330px;
				height: 400px;
				border: 1px #000 solid;
				margin: 0 auto;
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -o-box;
				display: box;
				}
				
				.box p {
				width: 100px;
				height: 20px;
				background: #000;
				margin: 5px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<p>123</p>
			<p>123</p>
			<p>123</p>
		</div>
	</body>
</html>

レンダリング:

CSS3 フレックスボックスとは何ですか?表示属性におけるflex属性値とbox属性値の違いと使い方

display:box 伸縮ボックス属性を親要素に宣言した後、ボックス全体がブロック要素であることを意味しますがインライン要素になった場合、親要素内の子要素は、各ブロック要素が独自の行を占有する代わりに、自由にスペースを割り当てることができ、1 つの行にまとめて配置されるようにネゴシエートされます。たとえば、上の例では、div 内の 3 つの p タグが階層的に分散されるのではなく、1 行に表示されます。 2 つ: display:flex は主に、親コンテナの幅に応じて子コンテナを分割することを可能にします。

display:flex; は 2011 年以降に登場し、将来的にはほとんどの新しいブラウザで標準の構文になります。基本的には使用しないでください。現時点では Apple ブラウザのみが Webkit プレフィックスを使用しており、その他は正常に表示されます。

新しいバージョンでは、伸縮ボックスの表示属性を次のように設定します:

display:flex; コンテナボックスモデルをブロックレベルのエラスティックボックスとして表示します (新バージョン)

display:inline-flex; コンテナボックスモデルをインラインレベルのエラスティックボックスとして表示します (新バージョン)

Usage:

まず第一に、flex の使用には親コンテナが必要であり、親コンテナ.

親コンテナ: コンテナ

属性:

display:flex;/*flex block level, inline-flex: inline fast*/

justify-content:space-around;/*center:horizontally center, flex-start:close Left; flex-end: 右へ; space-between: 両側に寄り、中央で均等に分割; space-around: 完全な均等配分*/

align-items: ストレッチ;/*center : 垂直中央、flex-start: 上へ、flex-end: 下へ、space-between、space-around*/

flex-direction: row;/*列は上から下に配置、column-reverse , row:左から右へ、row-reverse:右から左へ*/

flex-wrap:wrap;/*複数行表示を折り返す(親コンテナで表示しきれない場合は上から下へ), nowrap (コンテナの幅が十分でない場合、子要素は親コンテナの幅または高さを二等分します)、wrap-reverse: 下から上へ */

/*flex-flow は flex-direction の略語です。 flex-wrap*/

例:

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>弹性盒子--display:flex;</title>
  <style>
    .container{
       width:600px;
       height:400px;
       border:1px solid #000;
       display:flex;/*flex块级，inline-flex:行内快*/
       justify-content:space-around;
       align-items:stretch;
       flex-direction: row;
       flex-wrap:wrap;
       /*flex-flow是flex-direction、flex-wrap的缩写*/
    }
    .box{
    　　width:200px;
     　 height:100px;
        border:1px solid #000;
     }
   </style>
 </head>
 <body>
     <div>
　　　　   <div>这是中间的box1</div>
        　<div>这是中间的box2</div>
　　　</div>
 </body>
</html>

Rendering:

CSS3 フレックスボックスとは何ですか?表示属性におけるflex属性値とbox属性値の違いと使い方 Flex レイアウトに設定した後は、子要素の float、clear、およびvertical-align 属性が無効になることに注意してください。

以上がCSS3 フレックスボックスとは何ですか?表示属性におけるflex属性値とbox属性値の違いと使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

CSS Flexbox vsグリッド：包括的なレビューMay 12, 2025 am 12:01 AM

FlexBoxまたはグリッドの選択は、レイアウト要件によって異なります。1）FlexBoxは、ナビゲーションバーなどの1次元レイアウトに適しています。 2）グリッドは、雑誌のレイアウトなどの2次元レイアウトに適しています。この2つは、レイアウト効果を改善するためにプロジェクトで使用できます。

CSSファイルを含める方法：メソッドとベストプラクティスMay 11, 2025 am 12:02 AM

CSSファイルを含める最良の方法は、タグを使用してHTMLパーツに外部CSSファイルを導入することです。 1.タグを使用して、外部CSSファイルを導入します。 2。小さな調整のために、インラインCSSを使用できますが、注意して使用する必要があります。 3.大規模プロジェクトでは、@Importを介して他のCSSファイルをインポートするために、SASS以下などのCSSプリプロセッサを使用できます。 4。パフォーマンスのために、CSSファイルをマージし、CDNを使用し、CSSNANOなどのツールを使用して圧縮する必要があります。

FlexBox対グリッド：両方を学ぶべきですか？May 10, 2025 am 12:01 AM

はい、Youはrelearnbothlexboxandgrid.1）FlexBoxisidealforone-Dimensional、FlexiblleayoutslikenavigationMenus.2）Gridexcelsintwo-digsignssuchasmagazinelayouts.3）Bothenhanceslaysutibulivedibulisunivedivition、floctonsulururを

軌道力学（またはCSSキーフレームアニメーションの最適化方法）May 09, 2025 am 09:57 AM

独自のコードをリファクタリングするのはどのように見えますか？ジョン・レアは、彼が書いた古いCSSアニメーションを選び、それを最適化するという思考プロセスを歩きます。

CSSアニメーション：それらを作成するのは難しいですか？May 09, 2025 am 12:03 AM

cssanimationsArenotintinlentyhardbutrepracticeanderstanding ofcsspropertiesandtimingfunctions.1）

@KeyFrames CSS：最も使用されているトリックMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversitility andpowerincreatingsmoothcssanimations.keytricksinclude：1）defingsmoothtransitionsbetweenstates、2）AnimatingMultipleProperiessimally、3）3）bendorprefixesforbrows -compativity、4）組み合わせwithjavasfo

CSSカウンター：自動番号の包括的なガイドMay 07, 2025 pm 03:45 PM

csScounterSareSareusedTomageautomaticinginginwebdesigns.1）それらは、コンテンツ、リスト、および積極的なものを使用することができます

スクロール駆動型のアニメーションを使用したモダンなスクロールシャドウMay 07, 2025 am 10:34 AM

特にモバイルデバイスでは、スクロールシャドウを使用することは、Chrisが以前にカバーした微妙なUXです。 Geoffは、アニメーションタイムラインプロパティを使用する新しいアプローチをカバーしました。これがさらに別の方法です。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

MantisBT

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

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、