Summary of usage of CSS3 layout multi-column layout & box layout & flexible box layout & calc method

This article brings you a summary of the usage of multi-column layout & box layout & flexible box layout & calc method of CSS3 layout. It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. Helps.

1 Multi-column layout

Use multi-column layout to divide the content in an element into two or more columns for display, and ensure The content in each column is aligned at the bottom.

column-count attribute

In CSS3, this attribute is used to use the multi-column layout method. The meaning of this attribute is to divide the content in an element into multiple columns for display.

(1) Browser writing

Firefox: "-moz-column-count"

Safari, Chrome, Opera: "-webkit-column-count"

No need to add prefix in IE.

(2) When using a multi-column layout, you need to set the width of the element to the total width of multiple columns.

column-width attribute

You can also use this attribute to set the width of each column individually without setting the width of the element .

(1) Browser writing

Firefox: "-moz-column-width"

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

No need to add prefix in IE.

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

(2) Use this attribute to specify the width of each column without setting the width of the element. You need to set up a separate container element outside the element, and then specify the width of the container element. Otherwise, specify Column width is treated as unset by the browser.

column-gap attribute

(1) Function

Set the spacing distance between multiple columns

(1) Browser writing

Firefox : "-moz-column-gap"

Safari, Chorme: "-webkit-column-gap"

No need to add prefix in IE.

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

column-rule attribute

(1) Function

Add a spacing line between columns, and set the width, color, etc. of the spacing line. (Same as specifying the attribute value of the border attribute)

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

2 Box layout

box attribute

In CSS3, use this attribute to use box layout

(1) Browser writing

Firefox: "-moz-box"

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

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

(2) The difference between box layout and multi-column layout

1. When using multi-column layout,The width of each column must be equal. When specifying the width of each column, you can only specify a uniform width for all columns. The widths between columns cannot be different.

2. When using a multi-column layout, it is impossible to specifically specify what content is displayed in which column, so it is more suitable for displaying article content, but not suitable for arranging the entire web page. When the page structure is composed of various elements.

3 Flexible box layout

If you want the total width of the three div elements to be equal to the width of the browser window, and can change as the window width changes , how to set it?

flex property

Change the box layout to flexible box layout

#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；
}

order attribute

(1) Function

Change the display order of each element. You can add the order attribute to the style of each element. This attribute uses an integer attribute value that represents the serial number. When displaying, the browser displays these elements from small to large according to the serial number.

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

flex-direction property

(1) Function

Change the arrangement direction of elements.

(2) Value

row: horizontal arrangement (default value). row-reverse: horizontally reverse arrangement.

column: arranged vertically.                                                                                                                                                                                             column-reverse: Arranged vertically in reverse.

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

Adaptation of element height and width

(1) When using box layout, the height and width of elements are adaptive, that is, the width and height of elements can change according to changes in the arrangement direction.

(2) When there is a container element, there are three p elements in the element, and only the width and height are specified for the container element. As a result, when the arrangement direction is specified as the horizontal direction, the of the three elements The width is the width of the content in the element, and the height automatically becomes the height of the container. When the arrangement direction is specified as the vertical direction, the height# of the three elements ## is the height of the content in the element, and the width automatically becomes the width of the container . (There is a large blank area)

Use flexible box layout to eliminate the blank

（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实现瀑布流布局的方法

The above is the detailed content of Summary of usage of CSS3 layout multi-column layout & box layout & flexible box layout & calc method. For more information, please follow other related articles on the PHP Chinese website!