CSS3 Layout & Box Layout & Flex Box Layout &calc Method Usage Summary

This article brings the content is about the CSS3 layout of the multi-column layout & box layout & Flexible Box layout &calc method of usage summary, there is a certain reference value, a need for friends can refer to, I hope you have some help.

1 Multi-column layouts

Use a multi-column layout to divide the contents of an element into two or more columns , and make sure that the bottom of the content in each column is aligned.

Column-count Property

In CSS3, this property uses the multi-column Layout method , which means that the contents of an element are divided into columns for display.

(1) Browser writing

Firefox: "-moz-column-count"

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

You do not need to add a prefix in IE.

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

Column-width Property

You can also use this property 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"

You do not need to add a 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 property to specify the width of each column without setting the width of the element, you need to set a separate container element outside the element, and then specify the width of the container element, otherwise the specified width of each column is not set by the browser.

Column-gap Property

(1) function

Set the distance between multiple columns

(1) Browser writing

Firefox: "-moz-column-gap"

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

You do not need to add a prefix in IE.

Column-gap:3em;-moz-column-gap:3em;-webkit-column-gap:3em;

Column-rule Property

(1) function

Add a spacer line between the bar and the bar, and set the width, color, and so on for the spacer. (The same method as the property value of the Border property)

COLUMN-RULE:1PX Solid red;-moz-column-rule:1px solid red;-webkit-column-rule:1px solid red;

2 Box layout

Box property

In CSS3, this property is used to use the 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 layouts, the width of each column must be equal, and when you specify the width of each column, you can only specify a uniform width for all columns, and the width between columns and bars cannot be different.

2. When using multi-column layouts, it is also not possible to specify what columns are displayed in what column , so it is more appropriate to use when displaying the content of the article when it is not suitable for arranging the page structure of each element in the entire page.

3 Flexible Box layout

What if you want the total width of the three div elements to be equal to the width of the browser window and be able to change as the window width changes?

Flex Properties

Make the box layout into a 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 Property

(1) function

change the order in which each element is displayed . You can include the Order property in the style of each element, which uses an integer attribute value that represents an ordinal, and the browser displays the elements from small to large as they appear.

#container {Display:flex;} #left-sidebar{order:3;} #contents {flex:1;order:1;} #right-sidebar{order:2;}

Flex-direction Property

(1) function

Change the direction in which elements are arranged .

(2) value

Row: horizontal arrangement (default). Row-reverse: Horizontal reverse arrangement.

Column: vertical arrangement. Column-reverse: Vertical reverse arrangement.

#container {display:flex;flex-direction:column;}

Adaptive element height vs. width

(1) When using the box layout, the height and width of the element are self-adaptive , that is, the width and height of the element can be changed according to the arrangement direction.

(2) When there is a container element, there are three P elements in the element, only the width and height are specified for the container element, and the result is that when the arrangement direction is specified as horizontal, the width of the three elements is the width of the content in the element, and the height automatically becomes the height of the container. When the alignment direction is specified as a 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 . (large blank areas exist)

Use flexible box layouts to eliminate whitespace

(1) The total width and total height of the elements that are involved in arranging are always equal to the width and height of the container.

#container {Display:flex;} #contents {flex:1;}

If you use the Flex box layout, the width and height of the elements that use the Box-flex attribute are always automatically expanded so that the total width and total height of the elements participating in the arrangement are always equal to the width and height of the container.

(2) Flex properties can be used on multiple elements

Flex-grow Property

(1) function

Specifies the element width or height.

#container {display:flex;flex-direction:row;} #left-sidebar{flex-grow:1;} #contents {flex-grow:1;} #right-sidebar{ Flex-grow:3;}

Flex-shrink Property

(1) function

Specifies the element width or height.

(2) Relationship with Flex-grow attribute

When an element is arranged in a horizontal direction: If the sum of the child element's width style property value is less than the width value of the container element, the child element width must be adjusted by the Flex-grow property (plus weighted white space). If it is greater then the child element width must be adjusted by the Flex-shrink attribute (minus the weighted excess portion).

When an element is arranged in a portrait orientation: if the sum of the child element's height style property value is less than the height value of the container element, the child element width must be adjusted through the Flex-grow property, and if it is greater, the child element widths must be adjusted by the Flex-shrink property.

Result: The total width and total height of the elements participating in the arrangement are always equal to the width and height of the container

#container {display:flex;flex-direction:row;} #left-sidebar{flex-shrink:1;} #contents {flex-shrink:1;}# Right-sidebar{flex-shrink:3;}

Flex-basis Property

(1) function

Specifies the width of the child element before the adjustment , exactly as the width property does.

Attribute Merge

(1) Flex:flex-grow style attribute value Flex-shrink Style property value Flex-basis style attribute value; (all optional style attributes)

(2) Do not specify Flex-grow, Flex-shrink, the default Style property value is 1;flex-grow, flex-shrink default style value is 0px;

(3) When the child elements are arranged horizontally, Flex-grow, Flex-shrink, Flex-grow, Flex-shrink, Flex are used to specify or adjust the width of the child elements, and are used to specify or adjust the height of the child elements when arranged vertically.

flex:250px;//element width is 250px;flex:1 3 250px;

Flex-wrap Property

(1) function

Specify a single-line layout or multiline layout

(2) attribute value

NoWrap: does not break the line. Wrap: Line Wrap.

Wrap-reverse: Although wrapping is wrapped, the line wrap direction is the opposite of the line wrap direction when you use the Wrap Style property value.

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

Flex-flow Property

You can combine the Flex-direction property value with the Flex-wrap property in this property.

{flex-direction:row;flex-wrap:wrap;} equivalent to: {Flex-flow:row wrap;}

Specifies the alignment of the horizontal and vertical directions

Justify-content Property

(1) function

Used to specify how the remaining white space on the main axisof the layout container, except for child elements, is horizontal, vertical vertically, in the horizontal layout.

(2) When the Flex-grow property is not 0 o'clock, each child element automatically fills the container in the direction of main axis, so the Justify-content property value is invalid .

(3) attribute value

Flex-start: Layout All child elements starting from Main-start (default)

Flex-end: Layout All child elements starting from main-end.

Center: Centers all child elements in the layout.

Space-between: The first child element is laid out at Main-start, the last child element is laid out at Main-end, and the white space is evenly distributed between all child elements and child elements.

Space-around: Distributes the white space evenly in the following places, such as between Main-start and the first child element, between each child element and child element, and between the last child element and Main-end.

#content {display:flex;border:solid 5px blue;flex-direction:row;width:600px;height:30px ; Justify-content:flex-start;}

Align-items Property

(1) function

Lets you specify the alignment of the child elements , specifying the cross axis axis direction (horizontal vertically, horizontally). (Style properties for container elements)

(2) attribute value

Flex-start: Layout All child elements starting from Cross-start (default)

Flex-end: Layout All child elements starting from cross-end.

Center: Centers all child elements in the layout.

Baseline: If the layout direction of a child element is inconsistent with the layout direction of the container, then that value is equivalent to the effect of the Flex-start property values. Otherwise, the contents of all child elements are aligned along the baseline.

Stretch: All child elements in the same row are height-adjusted to maximum. If no child element height is specified, the height of all child elements is adjusted to the closest container height (when the element border and padding are considered, when the border width and padding are 0 equals the container height).

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

Align-self Property

(1) function

Used to specify the alignment of some child elements individually .

(2) attribute value

Auto: Inherits the Align-items property value of the parent element.

The other can specify property values that are the same as the Align-items property value.

Align-content Property

(1) function

You can use this property to specify the alignment of rows when you are making multi-line layouts .

(2) attribute value

Flex-start: Layout All child elements starting from Cross-start (default)

Flex-end: Layout All child elements starting from cross-end.

Center: Centers all child elements in the layout.

Space-between: The first row is laid out at Cross-start, the last row is laid out at Cross-end, and the empty portion is evenly spaced between the rows.

Space-around: Evenly distributes the white space in the following places, such as between Cross-start and the first row, between rows and child elements, and between the last row and 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 Method

(1) function

You can use this method to automatically calculate the value of style attributes for numeric types such as the width and height of an element.

(2) Browser support

So far: Safari6 above, Chrome19 above, Firefox8 above, Opera12 above, IE9 above the browser support this method.

#container {width:500px;background-color:pink;} #foo {Width:calc (50%-100px); background-color:green;}

(3) can be used to mix different counting units

 #container {Height:calc (10em+3px);}