CSS3_html/css_WEB-ITnose のフレキシブルボックスレイアウトの最新バージョン-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS3_html/css_WEB-ITnose のフレキシブルボックスレイアウトの最新バージョン

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:45 AM

CSS 3 のフレキシブルボックスレイアウトの最新バージョンの概要

CSS 3 では、CSS フレキシブルボックスモジュールは非常に重要なモジュールであり、非常に柔軟な方法でページレイアウト処理を実装するために使用されます。

他の CSS スタイル属性を使用してページレイアウト処理を実装することもできますが、CSS Flexible Box モジュールで定義されているフレキシブルボックスレイアウト技術を使用すると、ページ内の各ローカル領域の表示モードを画面に応じて自動的に調整できますつまり、非常に柔軟なレイアウト処理を実現します。

CSS Flexible Box モジュールは数年前から発表されていますが、モジュールで定義されている内容は最初の発表以来、いくつかの大きな改訂を受けています。現在発表されている正式バージョンは、CSS Flexible Box Layout Module - W3C Candidate Recommendation (2012 年 9 月 18 日) です。

これまでのところ、Opera 12.10 以降、IE 11 以降、Chrome 21 以降、Firefox 22 以降のブラウザはすべて、この最新バージョンをサポートしています。

サンプルページから最新バージョンの flexbox レイアウトの学習を開始します

次に、サンプルページから最新バージョンの flexbox レイアウトの学習を開始します。このサンプルページの body 要素のコードは次のとおりです。

<body><div id="main">    <div class="content">        <section>            <h1 id="section">section 1</h1>            <p>示例文字</p>        </section>        <section>            <h1 id="section">section 2</h1>            <p>示例文字</p>        </section>        <section>            <h1 id="section">section 3</h1>            <p>示例文字</p>        </section>        <section>            <h1 id="section">section 4</h1>            <p>示例文字</p>        </section>    </div>    <div class="content">        <section>            <h1 id="section">section 5</h1>            <p>示例文字</p>            <section>                <h1 id="section">section 6</h1>                <p>示例文字</p>            </section>            <section>                <h1 id="section">section 7</h1>                <p>示例文字</p>            </section>            <section>                <h1 id="section">section 8</h1>                <p>示例文字</p>            </section>    </div>    <div class="content">        <section>            <h1 id="section">section 9</h1>            <p>示例文字</p>        </section>        <section>            <h1 id="section">section 10</h1>            <p>示例文字</p>        </section>        <section>            <h1 id="section">section 11</h1>            <p>示例文字</p>        </section>        <section>            <h1 id="section">section 12</h1>            <p>示例文字</p>        </section>    </div></div></body>

次に、まずページ内の各 div 要素とセクション要素の境界線のスタイルを指定します。コードは次のとおりです。

<style>#main {    border: 1px dotted #f0f;    padding: 1em;}.content {    border: 1px dotted #0ff;    padding: 1em;}section {    border: 1px dotted #f00;    padding: 1em;}</style>

これまでのサンプルページをブラウザで開きます。以下の図に示すように、ページ上の要素が上から下に垂直に配置されます。

サンプルページでフレックスボックスレイアウトを使用する

フレックスボックスレイアウトを指定する方法は次のとおりです: レイアウトする必要がある要素のコンテナー要素で display:flex スタイル属性を使用します。 CSS フレキシブルボックスモジュールでは、コンテナ要素内の各要素を「フレックスアイテム」と呼び、コンテナ要素を「フレックスコンテナ」と呼びます。

フレキシブルボックスレイアウトと float およびその他のスタイル属性を使用したレイアウトの主な違いの 1 つは、float およびその他のスタイル属性を使用する場合、フレキシブルボックスレイアウトを使用する場合は、コンテナ内の各要素に対してスタイル属性を指定する必要があることです。スタイル属性をコンテナ要素に割り当てる必要があります。

次に、最初に、スタイルクラス名コンテンツを持つすべての div 要素にフレキシブルボックスレイアウトを使用します。これらの div 要素のコンテナ要素は、id 属性値を main とする div 要素です。この要素のスタイルコードを次のように変更します。

#main {    border: 1px dotted #f0f;    padding: 1em;    display: flex;}

ブラウザでサンプルページを開くと、以下の図に示すように、ページ上のスタイルクラス名の内容を持つすべての div 要素の配置が水平方向に配置されるように変更されます。

要素の配置方向を設定する

flex-direction スタイル属性を使用して、コンテナ内のすべてのサブ要素の配置方向を制御できます。指定値は次のとおりです。

id属性値がmainのdiv要素のスタイルを変更コードは次のとおりです。

#main {    border: 1px dotted #f0f;    padding: 1em;    display: flex;    flex-direction: row-reverse;}

ブラウザでサンプルページを開きます。ページ上のスタイルクラス名のコンテンツを持つすべての div 要素の配置が、コンテナー要素、つまり div 要素の右端から始まるように変更されます。 id 属性値を main として、下図のように横方向に逆順に配置します。

次に、まず、スタイルクラス名の内容を持つすべての div 要素の配置を水平および前方配置に復元し、id 属性値を main に持つ div 要素のスタイルコードを以下のように変更します。すべてのスタイルクラス content という名前の div 要素は、flex-direction: column-reverse; スタイル属性を指定します。ページ内の要素を下図のように上下逆配置（sectionサブ要素内のsection孫要素を除く）に変更します。

並べ替え順序を指定するには、order style 属性を使用します

フレキシブルボックスレイアウトを使用する場合、order 属性を使用して各要素の表示順序を変更できます。各要素のスタイルに order 属性を追加できます。この属性は、表示時にシリアル番号を表す整数の属性値を使用します。これらの要素は、シリアル番号の小さいものから大きいものまで表示されます。

次に、まずコンテンツのスタイルクラス名を持つすべての div 要素のすべてのセクションサブ要素の配置を垂直および前方配置に設定します。コンテンツのスタイルクラス名を持つすべての div 要素のスタイルコードを次のように変更します。

#main {    border: 1px dotted #f0f;    padding: 1em;    display: flex;}

続行次に、スタイルクラス名の内容を持つすべての div 要素の 2 番目のセクションサブ要素の order style 属性値を -1 に設定して、これらのセクションサブ要素が他のセクションサブ要素の前に最初に表示されるように設定します。コードは次のとおりです。

.content {    border: 1px dotted #0ff;    padding: 1em;    display: flex;    flex-direction: column-reverse;}

ブラウザでサンプルページを開きます。以下の図に示すように、ページ上のスタイルクラス名のコンテンツを持つすべての div 要素内の 2 番目のセクションサブ要素が、他のセクションサブ要素の前に表示されます。。

要素の幅と高さを設定する

次に、まず横に配置された各要素の幅を設定する方法を紹介します。

flex 属性値を使用すると、すべての子要素の合計幅をコンテナーの幅と等しくすることができます。

接下来通过将所有样式类名为content的div元素的flex属性值设置为1的方法使所有样式类名为content的div元素的总宽度等于容器元素，即id属性值为main的div元素的宽度，代码如下所示。当所有样式类名为content的div元素的flex属性值都被设置为1时，这些 div元素的宽度均等。

.content {    border: 1px dotted #0ff;    padding: 1em;    display: flex;    flex-direction: column;    flex:1;}

在浏览器中打开示例页面，所有样式类名为content的div元素的宽度自动增长，这些元素的总宽度等于容器元素，即id属性值为main的div元素的宽度,每一个样式类名为content的div元素的宽度均等，如下图所示。

接下来，我们设置第二个样式类名为content的div元素的flex属性值为2，代码如下所示。

.content:nth-child(2) {    flex:2;}

为了更清晰地计算元素宽度，我们取消所有元素的边框设置及内边距设置，修改后的完整样式代码如下所示。

<style>#main {    display: flex;}.content {    display: flex;    flex-direction: column;    flex:1;}.content section:nth-child(2) {    order: -1;}.content:nth-child(2) {    flex:2;}</style>

在浏览器中打开示例页面，第二个样式类名为content的div元素宽度为其他样式类名为content的div元素宽度的两倍，假设这些元素的容器元素，即id属性值为main的div元素的宽度等于600px，则第一个与第三个样式类名为content的div元素宽度的宽度均等于150px，第二个样式类名为content的div元素宽度的宽度等于300px。

可以使用flex-grow属性来指定元素宽度，但是该样式属性对于元素宽度的计算方法与flex样式属性对于元素宽度的计算方法有所不同。

接下来指定所有样式类名为content的div元素的flex-grow样式属性值为1，宽度为150px,指定第二个样式类名为content的div元素的flex-grow样式属性值为为3。修改后的完整样式代码如下所示。

<style>#main {    display: flex;}.content {    display: flex;    flex-direction: column;    width:150px;    flex-grow:1;}.content section:nth-child(2) {    order: -1;}.content:nth-child(2) {    flex-grow:3;}</style>

在浏览器中打开示例页面，假设这些元素的容器元素，即id属性值为main的div元素的宽度等于600，则第一个与第三个样式类名为content 的div元素宽度的宽度均等于180px，第二个样式类名为content的div元素宽度的宽度等于240px。对于每个样式类名为content的 div元素宽度的计算步骤如下所示：

600(容器宽度)-150*3（三个样式类名为content的div元素宽度的总宽度）=150

150/5(三个样式类名为content的div元素宽度的flex-grow样式属性值的总和)=30

第一个与第三个样式类名为content的div元素宽度的宽度均等于150（其width样式属性值+）+30*1（其flew-grow样式属性值）=180px

第二个样式类名为content的div元素宽度的宽度等于150（其width样式属性值+）+30*3（其flew-grow样式属性值）=240px

可以使用flex-shrink属性来指定元素宽度，该样式属性与flex-grow样式属性的区别在于：当子元素的width样式属性值的总和小于容器元素的宽度值时，必须通过flex-grow样式属性来调整子元素宽度，当子元素的width样式属性值的总和大于容器元素的宽度值时，必须通过 flex-shrink样式属性来调整子元素宽度。

接下来指定所有样式类名为content的div元素的flex-shrink样式属性值为1，宽度为250px,指定第二个样式类名为content的div元素的flex-shrink样式属性值为为3。修改后的完整样式代码如下所示。

<style>#main {    display: flex;}.content {    display: flex;    flex-direction: column;    width:250px;    flex-shrink:1;}.content section:nth-child(2) {    order: -1;}.content:nth-child(2) {    flex-shrink:3;}</style>

在浏览器中打开示例页面，假设这些元素的容器元素，即id属性值为main的div元素的宽度等于600，则第一个与第三个样式类名为content 的div元素宽度的宽度均等于220px，第二个样式类名为content的div元素宽度的宽度等于160px。对于每个样式类名为content的 div元素宽度的计算步骤如下所示：

250*3（三个样式类名为content的div元素宽度的总宽度）-600(容器宽度)=150

150/5(三个样式类名为content的div元素宽度的flex-shrink样式属性值的总和)=30

第一个与第三个样式类名为content的div元素宽度的宽度均等于250（其width样式属性值+）-30*1（其flew-shrink样式属性值）=220px

第二个样式类名为content的div元素宽度的宽度等于250（其width样式属性值+）-30*3（其flew-grow样式属性值）=160px

在使用flex-grow样式属性或flex-shrink样式属性调整子元素宽度时，也可以使用flex-basis样式属性指定调整前的子元素宽度，该样式属性与width样式属性的作用完全相同。

可以将flex-grow、flex-shrink以及flex-basis样式属性值合并写入flex样式属性中，方法如下所示。

flex:flex-grow样式属性值 flex-shrink样式属性值 flex-basis样式属性值;

在使用flex样式属性值时，flex-grow、flex-shrink以及flex-basis样式属性值均为可选用样式属性值，当不指定 flex-grow、flex-shrink样式属性值时，默认样式属性值均为1，当不指定flex-basis样式属性值时，默认样式属性值为0px。

修改本示例中的样式代码如下所示：

<style>#main {    display: flex;}.content {    display: flex;    flex-direction: column;    width:250px;    flex:250px;}.content section:nth-child(2) {    order: -1;}.content:nth-child(2) {    flex:1 3 250px;}</style>

在浏览器中打开示例页面，假设这些元素的容器元素，即id属性值为main的div元素的宽度等于600，则第一个与第三个样式类名为content的div元素宽度的宽度均等于220px，第二个样式类名为content的div元素宽度的宽度等于160px。

在子元素为横向排列时，flex、flex-grow、flex-shrink以及flex-basis样式属性均用于指定或调整子元素宽度，当子元素为纵向排列时，flex、flex-grow、flex-shrink以及flex-basis样式属性均用于指定或调整子元素高度。

单行布局与多行布局

可以使用flex-wrap样式属性来指定单行布局或多行布局，可指定样式属性值如下所示：

nowrap:不换行
wrap:换行
wrap-reverse:虽然换行，但是换行方向与使用wrap样式属性值时的换行方向相反

接下来首先恢复页面内各div元素的边框与内边距(padding)的指定，同时指定所有样式类名为content的div元素的宽度为250px，代码如下所示。

<style>#main {    border: 1px dotted #f0f;    padding: 1em;    display: flex;}.content {    border: 1px dotted #0ff;    padding: 1em;    display: flex;    flex-direction: column;    flex:250px;}section {    border: 1px dotted #f00;    padding: 1em;}.content section:nth-child(2) {    order: -1;}</style>

然后指定容器元素，即id属性值为main的div元素的flex-wrap样式属性值为wrap，以指定允许对所有样式类名为content的div元素进行换行布局，代码如下所示。

#main {    border: 1px dotted #f0f;    padding: 1em;    display: flex;    flex-wrap: wrap;}

在浏览器中打开示例页面，当浏览器窗口宽度不足以容纳三个样式类名为content的div元素时，最右边的样式类名为content的div元素被换行显示，如下图所示。

可以将flex-direction样式属性值与flex-wrap样式属性值合并书写在flex-flow样式属性中。以下两段代码的作用完全相同。

//使用flex-direction样式属性与flex-wrap样式属性.content {    flex-direction: row;    flex-wrap: wrap;}//使用flex-flow样式属性.content {    flex-flow: row wrap;}

弹性盒布局中的一些专用术语

接下来首先介绍弹性盒布局中的一些专用术语，在进行布局时这些术语的含义如下图所示。

main axis:进行布局时作为布局基准的轴，在横向布局时为水平轴，在纵向布局时为垂直轴。
main-start / main-end:进行布局时的布局起点与布局终点。在横向布局时为容器的左端与右端，在纵向布局时为容器的顶端与底端。
cross axis:与main axis垂直相交的轴，在横向布局时为垂直轴，在纵向布局时为水平轴。
cross-start / cross-end:cross axis轴的起点与终点。在横向布局时为容器的顶端与底端，在纵向布局时为容器的左端与右端。将flex-wrap属性值指定为wrap且进行横向多行布局时，按从cross-start到cross-end方向，即从上往下布局，将flex-wrap属性值指定为wrap-reverse且进行横向多行布局时，按从cross-end到cross-start方向，即从下往上布局。

justify-content属性

justify-content属性用于指定如何布局容器中除了子元素之外的main axis轴方向（横向布局时main axis轴方向为水平方向，纵向布局时main axis轴方向为垂直方向）上的剩余空白部分。

当flex-grow属性值不为0时，各子元素在main axis轴方向上自动填满容器，所以justify-content属性值无效。

可指定justify-content属性值如下所示：

flex-start：从main-start开始布局所有子元素（默认值）。
flex-end：从main-end开始布局所有子元素。
center：居中布局所有子元素。
space-between：将第一个子元素布局在main-start处，将最后一个子元素布局在main-end处，将空白部分平均分配在所有子元素与子元素之间。
space-around：将空白部分平均分配在以下几处：main-start与第一个子元素之间、各子元素与子元素之间、最后一个子元素与main-end之间。

上述各属性值的区别如下图所示(灰色代表空白部分)。

align-items属性与align-self属性

align-items属性与justify-content属性类似，用于指定子元素的对齐方式，但是align-items属性指定的是 cross axis轴方向（横向布局时cross axis轴方向为垂直方向，纵向布局时cross axis轴方向为水平方向）上的对齐方式，可指定属性值如下所示。

flex-start: クロススタート (デフォルト値) から始まるすべての子要素をレイアウトします。
flex-end: クロスエンドから始まるすべての子要素をレイアウトします。
center: すべての子要素を中央にレイアウトします。
baseline: 子要素のレイアウト方向がコンテナのレイアウト方向と一致しない場合、この値の効果は flex-start 属性値の効果と同等です。子要素のレイアウト方向がコンテナのレイアウト方向と一致している場合、すべての子要素のコンテンツはベースラインに沿って配置されます。
stretch: 同じ行内のすべての子要素の高さが最大に調整されます。子要素の高さが指定されていない場合、すべての子要素の高さはコンテナの高さに最も近くなるように調整されます (要素のボーダーとパディングが考慮され、ボーダーの幅とパディングが両方とも 0 の場合、それらはコンテナーの高さに等しくなります)。コンテナの高さ）。

上記の属性値の違いは下図のとおりです（灰色は空白部分を表します）。

align-self 属性と align-items 属性の違いは、align-items はコンテナ要素の style 属性として指定され、すべての子要素の配置を指定するために使用されるのに対し、align-self 属性は属性は、いくつかの子要素の style 属性として指定され、これらの子要素の配置を個別に指定します。たとえば、コンテナ要素の align-items 属性値を center (中央揃え) に指定した後、最初の子要素の align-self 属性値を flex-start (クロススタート端に揃える) として指定できます。指定する値は以下の通りです。

Flex-Start
Stretch
Align-CONTENT プロパティ
複数行レイアウトする場合、 align-content 属性を使用して、各行の配置を指定できます。この属性と align-items 属性の違いは、align-items 属性は子要素の配置を指定するために使用されるのに対し、align-content 属性は行の配置を指定するために使用されることです。指定できる属性値は以下のとおりです。

flex-start: クロススタートから全行を配置します。

flex-end: クロスエンドから始まるすべての行をレイアウトします。

上記の属性値の違いは下図のとおりです（灰色は空白部分を表します）。

声明

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

属性を持つHTMLタグの例を挙げてください。May 16, 2025 am 12:02 AM

HTMLタグと属性の使用方法には次のものが含まれます。1。基本的な使用法：などのタグを使用し、SRCやHREFなどの属性を介して必要な情報を追加します。 2。高度な使用法：データ - *カスタム属性を使用して、複雑な相互作用を実現します。 3.一般的な間違いを避けてください：プロパティ値が見積もりに囲まれていることを確認してください。 4。パフォーマンスの最適化：シンプルに保ち、標準属性とCSSクラス名を使用して、画像にALT属性があることを確認します。これらをマスターすると、Web開発スキルが向上します。

HTMLタグとHTML属性の違いは何ですか？May 14, 2025 am 12:01 AM

htmltagsdeTheStructureOfawebpage、whiLeattributesdddddddddtetails.1）tagslike、andoutlineThecontentのsplacement.2）属性、クラス、およびスチリーンハンシテアグビーズイメージソース、スタイリング、および改善、および改善の想像力。

HTMLの未来：進化とトレンドMay 13, 2025 am 12:01 AM

HTMLの未来は、よりセマンティック、機能的、モジュール式方向に発展します。 1）セマンティック化により、タグがコンテンツをより明確に説明し、SEOとバリアのないアクセスを改善します。 2）機能化は、ユーザーのニーズを満たすために新しい要素と属性を導入します。 3）モジュール性は、コンポーネントの開発をサポートし、コードの再利用性を改善します。

Web開発にとってHTML属性が重要なのはなぜですか？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevevermentmentmentmentmentmentmentmention behavior、like、andfunctionality.theyenhance -interactivity、accessibility、andseo.forexample、thesrcattribute intagsimpactsseo

Alt属性の目的は何ですか？なぜそれが重要なのですか？May 11, 2025 am 12:01 AM

ALT属性は、HTMLのタグの重要な部分であり、画像の代替テキストを提供するために使用されます。 1.画像をロードできない場合、ALT属性のテキストが表示され、ユーザーエクスペリエンスが向上します。 2。スクリーンリーダーは、ALT属性を使用して、視覚障害のあるユーザーが写真の内容を理解するのに役立ちます。 3. ALT属性のEnginesインデックステキストを検索して、WebページのSEOランキングを改善します。

HTML、CSS、およびJavaScript：例と実用的なアプリケーションMay 09, 2025 am 12:01 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造の構築に使用されます。 2。CSSは、Webページの外観を美化するために使用されます。 3. JavaScriptは、動的な相互作用を実現するために使用されます。タグ、スタイル、スクリプトを通じて、これら3つは最新のWebページのコア関数を構築します。

Lang属性をタグにどのように設定しますか？なぜこれが重要なのですか？May 08, 2025 am 12:03 AM

タグのLang属性を設定することは、WebアクセシビリティとSEOを最適化する重要なステップです。 1）ラング属性をタグに設定します。 2）多言語コンテンツでは、ようなさまざまな言語パーツのLang属性を設定します。 3）「EN」、「FR」、「ZH」などのISO639-1標準に準拠する言語コードを使用します。Lang属性を正しく設定すると、Webページと検索エンジンランキングのアクセシビリティが向上します。

HTML属性の目的は何ですか？May 07, 2025 am 12:01 AM

htmlattributeSareSientionalentionalentionalentionalentiallyance'functionalityandappearance.theyaddinformationtodefinebehavior、light、and interaction、makewebsitesteractive、responsive、andviseallyappaleal.attributeslikesrc、href、class、型、およびdoadabledransform

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

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

ホットツール

WebStorm Mac版

便利なJavaScript開発ツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

MinGW - Minimalist GNU for Windows

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