ホームページ >バックエンド開発 >PHPチュートリアル >CSS3での柔軟なボックスレイアウト

CSS3での柔軟なボックスレイアウト

伊谢尔伦オリジナル: 2016-11-24 15:11:281609ブラウズ

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

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

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

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

CSS3での柔軟なボックスレイアウト

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

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

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

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

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

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

CSS3での柔軟なボックスレイアウト

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

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

row：横配置（デフォルト値）

row-reverse：横反転配置

column：縦配置

column-reverse：縦反転配置

id属性値がmainのdiv要素のスタイルコードを変更以下に示すように:

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

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

CSS3での柔軟なボックスレイアウト

次に、まずスタイルクラス名の内容を持つ全てのdiv要素の配置を横並び前方配置に戻し、id属性値がmainであるdiv要素のスタイルコードを以下のように修正します。

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

その後調整しますすべてのスタイルクラス名 content を持つ div 要素は、flex-direction: column-reverse スタイル属性を指定します。コードは次のとおりです:

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

のすべてのセクションのサブ要素の配置。ページ内のすべてのコンテンツの div 要素を下図のように縦方向に逆方向に配置するように修正します（section 子要素内の Section の孫要素を除く）。

CSS3での柔軟なボックスレイアウト

　使用order样式属性指定排列顺序

　　使用弹性盒布局的时候，可以通过order属性来改变各元素的显示顺序。可以在每个元素的样式中加入order属性，该属性使用一个表示序号的整数属性值，浏览器在显示的时候根据该序号从小到大来显示这些元素。

　　接下来首先设置所有样式类名为content的div元素的所有section子元素的排列方式为纵向正向排列，修改所有样式类名为content的div元素的样式代码如下所示：

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

　　接下来通过将所有样式类名为content的div元素中的第2个section子元素的order样式属性值设置为-1的方法设置这些section子元素被优先显示在其他section子元素之前，代码如下所示：

.content section:nth-child(2) {
    order: -1;
}

　　在浏览器中打开示例页面，页面中所有样式类名为content的div元素中的第2个section子元素被显示在其他section子元素之前，如下图所示。

CSS3での柔軟なボックスレイアウト

　设置元素宽度及高度

　　接下来首先介绍如何设置被横向排列的每一个元素的宽度。

　　可以通过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元素的宽度均等，如下图所示。

CSS3での柔軟なボックスレイアウト

接下来，我们设置第二个样式类名为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元素被换行显示，如下图所示。

CSS3での柔軟なボックスレイアウト

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

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

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

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

CSS3での柔軟なボックスレイアウト

主軸: 横にレイアウトする場合は横軸、縦にレイアウトする場合は縦軸になります。

main-start / main-end: レイアウト時のレイアウトの開始点と終了点。水平レイアウトの場合はコンテナの左端と右端、垂直レイアウトの場合はコンテナの上部と下部になります。

クロス軸: 主軸と垂直に交差する軸。水平レイアウトでは垂直軸、垂直レイアウトでは水平軸になります。

クロススタート/クロスエンド: クロス軸の開始点と終了点。横型レイアウトの場合はコンテナの上下、縦型レイアウトの場合はコンテナの左端と右端になります。 flex-wrap属性値にwrapを指定して横複数行レイアウトを行う場合、flex-wrap属性値にwrapを指定した場合、クロススタートからクロスエンドへの方向、つまり上から下へのレイアウトとなります。反転して水平複数行レイアウトを実行します。行をレイアウトするときは、クロスエンドからクロススタートの方向、つまり下から上にレイアウトします。

justify-content属性

justify-content属性は、子要素を除いたコンテナの主軸方向をどのように配置するかを指定するために使用します（水平レイアウト時は主軸の軸方向が水平、主軸の軸方向は垂直レイアウトの場合は垂直です) 方向)。

flex-grow属性値が0以外の場合、各子要素はコンテナを主軸方向に自動的に埋めるため、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 の間の空白を均等に配置します。

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

CSS3での柔軟なボックスレイアウト

align-items 属性と align-self 属性

align-items 属性は justify-content 属性に似ており、子要素の配置を指定するために使用されますが、align-items 属性は横軸方向（横軸レイアウト時は横軸方向、縦レイアウト時は横軸方向）指定できる属性値は以下のとおりです。

flex-start: クロススタート (デフォルト値) から始まるすべての子要素をレイアウトします。

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

center: すべての子要素を中央にレイアウトします。

baseline: 子要素のレイアウト方向がコンテナのレイアウト方向と一致しない場合、この値の効果は flex-start 属性値の効果と同等です。子要素のレイアウト方向がコンテナのレイアウト方向と一致している場合、すべての子要素のコンテンツはベースラインに沿って配置されます。

stretch: 同じ行内のすべての子要素の高さが最大に調整されます。子要素の高さが指定されていない場合、すべての子要素の高さはコンテナの高さに最も近くなるように調整されます (要素のボーダーとパディングが考慮され、ボーダーの幅とパディングが両方とも 0 の場合、それらはコンテナーの高さに等しくなります)。コンテナの高さ）。

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

CSS3での柔軟なボックスレイアウト

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

auto: 親要素のalign-items属性値を継承

flex-start

flex-end

center

baseline

stretch

align-content 属性

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

flex-start: クロススタートから全行をレイアウトします。

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

center: すべての行を中央にレイアウトします。

space-between: 最初の行をクロススタートに配置し、最後の行をクロスエンドに配置し、行間に空白部分を均等に配置します。

スペースアラウンド: クロススタートと最初の線の間、各行の間、最後の線とクロスエンドの間の次の場所に空白を均等に配置します。

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

CSS3での柔軟なボックスレイアウト

声明：

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

前の記事：PHPでファイルを読み取る正しい方法次の記事：PHPでファイルを読み取る正しい方法

続きを見る

CSS3での柔軟なボックスレイアウト

関連記事