CSS3レイアウトの使い方まとめ マルチカラムレイアウト＆ボックスレイアウト＆フレキシブルボックスレイアウト＆計算方法

この記事は、CSS3 レイアウトのマルチカラム レイアウト、ボックス レイアウト、および計算方法をまとめたものです。必要な方は参考にしていただければ幸いです。 。 ヘルプ。

1 複数列レイアウト

複数列レイアウトを使用すると、要素内のコンテンツを 2 つ以上の列に分割して表示し、各列のコンテンツの下部を確実に揃えることができます。

列数属性

CSS3 では、この属性は 複数列レイアウト メソッド を使用するために使用されます。この属性の意味は、要素内のコンテンツを 複数列 に分割して表示することです。

(1)ブラウザの書き込み

Firefox: "-moz-column-count"

Safari、Chorme、Opera: "-webkit-column-count"

IEではプレフィックスを追加する必要はありません。

(2) 複数列レイアウトを使用する場合、要素の幅を複数列の合計幅に設定する必要があります。

列幅属性

この属性を使用して、要素の幅を設定せずに各列の幅を個別に設定することもできます。

(1) ブラウザの書き込み

Firefox: "-moz-column-width"

Safari、Chorme、Opera: "-webkit-column-width"

IE ではプレフィックスは必要ありません。

column-count：2；
-moz-column-count：2；
-webkit-column-count：2；
column-width：20em；
-moz-column-width：20em；
“-webkit-column-width：20em；

(2) この属性を使用して、要素の幅を設定せずに各列の幅を指定するには、要素の外側に別のコンテナ要素を設定してから、コンテナ要素の幅を指定する必要があります。それ以外の場合は、それ以外の場合は、各列の指定された幅はブラウザによってブロックされ、設定されていないものとみなされます。

列ギャップ属性

(1) 機能

複数の列間の間隔を設定します

(1) ブラウザの書き込み

Firefox: “-moz-column-gap”

Safari、Chorme: “-webkit-column -gap”

IEでプレフィックスを追加する必要はありません。

column-gap：3em；
-moz-column-gap：3em；
-webkit-column-gap：3em；

列ルール属性

(1) 機能

列の間にスペーサー線を追加し、スペーサー線の幅や色などを設定します。 (border属性の属性値指定方法と同じ)

column-rule：1px solid red；
-moz-column-rule：1px solid red；
-webkit-column-rule：1px solid red；

2 Boxレイアウト

box属性

CSS3では、この属性を使用してボックスレイアウトを使用します

(1) ブラウザの書き込み

Firefox: "-moz-box"

Safari、Chorme、Opera: "-webkit-box"

display：-moz-box；
display：-webkit-box；

(2) ) ボックスレイアウトと複数列レイアウトの違い

1. 複数列レイアウトを使用する場合、各列の幅は同じである必要があります 各列の幅を指定する場合は、すべての列で統一された幅のみを指定できます。列間の幅を変えることはできません。

2. マルチカラムレイアウトを使用する場合、

どのカラムにどのコンテンツを表示するかを指定することもできないので、記事のコンテンツを表示するのには適していますが、さまざまな要素から構成されるページ構造を配置するのには適していません。 Web ページ全体で。

3 柔軟なボックスレイアウト

3 つの div 要素の合計幅をブラウザウィンドウの幅と同じにし、ウィンドウの幅の変化に応じて変更できるようにしたい場合、どのように設定すればよいでしょうか?

フレックスプロパティ

ボックスレイアウトを

フレキシブルボックスレイアウト

#container{
display：flex；
}
#left-sidebar{
width：200px；
padding：20px；
background-color：orange；
}
#contents{
flex：1；
padding：20px；
background-color：yellow；
}
#right-sidebar{
width：200px；
padding：20px；
background-color：limegreen；
}

オーダー属性

にします

(1) 機能

各要素の表示順序を変更します。各要素のスタイルに order 属性を追加できます。この属性では、シリアル番号を表す整数の属性値が使用されます。ブラウザは、シリアル番号に従ってこれらの要素を小さい順に表示します。

#container{
display：flex；
}
#left-sidebar{
order：3；
}
#contents{
flex：1；
order：1；
}
#right-sidebar{
order：2；
}

フレックス方向プロパティ

(1) 関数

は要素の

配置方向を変更します。

(2)の値

行: 横方向に配置します(デフォルト)。 row-reverse: 水平方向に逆の配置。

列: 縦に配置されます。 カラムリバース：縦と逆の配置。

#container{
display：flex；
flex-direction：column；
}

要素の高さと幅の調整

(1) ボックスレイアウトを使用する場合、要素の高さと幅は

適応的です。つまり、要素の幅と高さは配置方向の変更に応じて変更できます。 (2)コンテナ要素がある場合、要素内にp要素が3つあり、コンテナ要素には幅と高さのみが指定されるため、配置方向を横方向に指定すると、 3つの要素の

幅

は、コンテンツの幅と高さは、配置方向を垂直方向に指定すると、自動的にコンテナの高さになります。は要素内の コンテンツの高さ で、 幅は自動的にコンテナ の幅になります。 (大きな空白があります) フレックスボックスレイアウトを使用して空白を排除します

（1）使得多个参与排列的元素的总宽度与总高度始终等于容器的宽度和高度。

#container{
display：flex；
}
#contents{
flex：1；
}

如果使用弹性盒布局，使用了box-flex属性的元素的宽度与高度总会自动扩大，使得参与排列的元素的总宽度与总高度始终等于容器的宽度和高度。

（2）可对多个元素使用flex属性

flex-grow属性

（1）功能

指定元素宽度或高度。

#container{
display：flex；
flex-direction：row；
}
#left-sidebar{
flex-grow：1；
}
#contents{
flex-grow：1；
}
#right-sidebar{
flex-grow：3；
}

flex-shrink属性

（1）功能

指定元素宽度或高度。

（2）与flex-grow属性关系

当元素排列方向为横向排列时：如果子元素的width样式属性值的总和小于容器元素的宽度值，必须通过flex-grow属性（加上加权空白）来调整子元素宽，若大于则必须通过flex-shrink属性（减去加权超出部分）来调整子元素宽度。

当元素排列方向为纵向排列时：如果子元素的height样式属性值的总和小于容器元素的高度值，必须通过flex-grow属性来调整子元素宽，若大于则必须通过flex-shrink属性来调整子元素宽度。

结果：参与排列的元素的总宽度与总高度始终等于容器的宽度和高度

#container{
display：flex；
flex-direction：row；
}
#left-sidebar{
flex-shrink：1；
}
#contents{
flex-shrink：1；
}
#right-sidebar{
flex-shrink：3；
}

flex-basis属性

（1）功能

指定调整前的子元素宽度，与width属性的作用完全相同。

属性合并

（1）flex：flex-grow样式属性值    flex-shrink样式属性值    flex-basis样式属性值；（均为可选样式属性）

（2）不指定flex-grow， flex-shrink时，默认样式属性值为1；flex-grow， flex-shrink 默认样式值为 0px；

（3）子元素为横向排列时，flex-grow， flex-shrink、flex-grow， flex-shrink、flex均用于指定或调整子元素的宽度；为纵向排列时，则用于指定或调整子元素的高度。

flex:250px;//元素宽度为250px；
flex：1 3 250px；

flex-wrap属性

（1）功能

指定单行布局或多行布局

（2）属性值

nowrap：不换行。               wrap：换行。

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

#container{
display：flex；
border:solid 5px blue;
flex-direction:row;
flex-wrap：wrap；
}

flex-flow属性

可以将flex-direction属性值与flex-wrap属性合并书写在该属性中。

{
flex-direction：row；
flex-wrap：wrap；
}
等价于：
{
flex-flow：row wrap；
}

指定水平方向与垂直方向的对齐方式

justify-content属性

（1）功能

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

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

（3）属性值

flex-start：从main-start开始布局所有子元素（默认）

flex-end：从main-end开始布局所有子元素。

center：居中布局所有子元素。

space-between：将第一个子元素布局在main-start处，将最后一个子元素布局在main-end处，将空白部分平均分配在所有子元素与子元素之间。

space-around：将空白部分平均分配在以下几处，如main-start与第一个子元素之间、各子元素与子元素之间、最后一个子元素与main-end之间。

#content{ 
display：flex；
border：solid 5px blue；
flex-direction：row；
width：600px；
height：30px；
justify-content：flex-start；
}

align-items属性

（1）功能

用于指定子元素对齐方式，指定的是cross axis轴方向（横为垂直，纵为水平）。（容器元素的样式属性）

（2）属性值

flex-start：从cross-start开始布局所有子元素（默认）

flex-end：从cross-end开始布局所有子元素。

center：居中布局所有子元素。

baseline：如果子元素的布局方向与容器的布局方向不一致，则该值得作用等效于flex-start属性值的作用。否则，所有子元素中的内容沿基线对齐。

stretch：同一行中的所有子元素高度被调整为最大。如果未指定任何子元素高度，则所有子元素高度被调整为最接近容器高度（当考虑元素边框及内边距时，当边框宽度与内边距均为0则等于容器高度）。

#content{ 
display：flex；
border：solid 5px blue；
flex-direction：row；
width：600px；
align-items：flex-start；
}

align-self属性

（1）功能

用于单独指定某些子元素的对齐方式。

（2）属性值

auto：继承父元素的align-items属性值。

其他可指定属性值同align-items属性的可指定属性值。

align-content 属性

（1）功能

在进行多行布局时，可以使用该属性指定各行对齐方式。

（2）属性值

flex-start：从cross-start开始布局所有子元素（默认）

flex-end：从cross-end开始布局所有子元素。

center：居中布局所有子元素。

space-between：将第一行布局在cross-start处，将最后一行布局在cross-end处，将空白部分平均分配在各行之间。

space-around：将空白部分平均分配在以下几处，如cross-start与第一行之间、各行与子元素行之间、最后一行与cross-end之间。

#content{ 
display：flex；
border：solid 5px blue；
flex-direction：row；
flex-wrap：wrap；
width：300px；
height：400px；
align-conten：flex-start；
}

4 calc方法

（1）作用

可以通过该方法来自动计算元素的宽度、高度等数值类型的样式属性值。

（2）浏览器支持

到目前为止：Safari6以上、Chrome19以上 、Firefox8以上、Opera12以上、IE9以上浏览器支持该方法。 

#container{
width：500px；
background-color：pink；
}
#foo{
width：calc（50%-100px）；
background-color：green；
}

（3）可以用来对各种不同的计数单位进行混合运算

#container{
height：calc（10em+3px）；
}

相关推荐：

css3 -webkit-flex 布局_html/css_WEB-ITnose

CSS3实现瀑布流布局的方法

以上がCSS3レイアウトの使い方まとめ マルチカラムレイアウト＆ボックスレイアウト＆フレキシブルボックスレイアウト＆計算方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。