Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to realize CSS3 multi-column layout, box layout and elastic box layout". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1 multi-column layout

Using a multi-column layout, you can divide the content of an element into two or more columns and ensure that the bottom of the content in each column is aligned.

Column-count attribute

In CSS3, multi-column layout is used through this attribute, which means to display the contents of an element into multiple columns.

(1) browser writing

Firefox: "- moz-column-count"

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

There is no need to add a 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 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"

There is no 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) if you use this attribute 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 will be regarded as unset by the browser.

Column-gap attribute

(1) function

Set the distance between multiple columns

(1) browser writing

Firefox: "- moz-column-gap"

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

There is no need to add a prefix in IE.

Column-gap:3em

-moz-column-gap:3em

-webkit-column-gap:3em

Column-rule attribute

(1) function

Add a spacer line between the columns, and set the width, color, etc. (same as property value assignment for border property)

Column-rule:1pxsolidred

-moz-column-rule:1pxsolidred

-webkit-column-rule:1pxsolidred

2-box layout

Box attribute

In CSS3, use this property 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 a multi-column layout, 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 cannot be different.

two。 When using a multi-column layout, it is also impossible to specify which columns are displayed, so it is more suitable for displaying article content and not for arranging the page structure made up of elements in the entire page.

3 elastic 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 can change as the width of the window changes?

Flex attribute

Change the box layout into an elastic 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, which uses an integer attribute value that represents the sequence number, and the browser displays the elements from smallest to largest according to the sequence number.

# container {

Display:flex

}

# left-sidebar {

Order:3

}

# contents {

Flex:1

Order:1

}

# right-sidebar {

Order:2

}

Flex-direction attribute

(1) function

Change the direction of the elements.

(2) value

Row: arrange horizontally (default). Row-reverse: arranged horizontally and in reverse.

Column: arranged vertically. Column-reverse: arranged longitudinally in reverse.

# container {

Display:flex

Flex-direction:column

}

Self-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 be changed according to the direction of arrangement.

(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 width of the three elements is the width of the content in the element. the height automatically changes to the height of the container, and 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 elastic box layout to eliminate whitespace

(1) so that the total width and height of multiple elements participating in the arrangement are always equal to the width and height of the container.

# container {

Display:flex

}

# contents {

Flex:1

}

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

(2) you can use the flex attribute for multiple elements

Flex-grow attribute

(1) function

Specify the width or height of the element.

# container {

Display:flex

Flex-direction:row

}

# left-sidebar {

Flex-grow:1

}

# contents {

Flex-grow:1

}

# right-sidebar {

Flex-grow:3

}

Flex-shrink attribute

(1) function

Specify the width or height of the element.

(2) relationship with flex-grow attribute

When elements are arranged horizontally: if the sum of the width style attribute values of the child elements is less than the width value of the container element, the width of the child elements must be adjusted by the flex-grow attribute (plus weighted whitespace), and if it is larger, the width of the child elements must be adjusted by the flex-shrink attribute (minus the weighted excess).

When the elements are arranged vertically: if the sum of the height style attribute values of the child elements is less than the height value of the container element, the width of the child elements must be adjusted through the flex-grow attribute, and if it is greater than the flex-shrink attribute, the width of the child elements must be adjusted.

Results: the total width and height of the elements involved 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 attribute

(1) function

Specifies the width of the child element before adjustment, which is exactly the same as the width attribute.

Attribute merging

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

(2) when flex-grow,flex-shrink is not specified, the default style attribute value is 1. The default style value is 0px.

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

The width of the flex:250px;// element is 250px

Flex:13250px

Flex-wrap attribute

(1) function

Specify a single-line or multiline layout

(2) attribute value

Nowrap: no line breaks. Wrap: line change.

Wrap-reverse: although the line wraps, the direction of the line wrap is the opposite of that when using the wrap style property value.

# container {

Display:flex

Border:solid5pxblue

Flex-direction:row

Flex-wrap:wrap

}

Flex-flow attribute

You can combine the value of the flex-direction property with the flex-wrap property to write in this property.

{

Flex-direction:row

Flex-wrap:wrap

}

Equivalent to:

{

Flex-flow:rowwrap

}

Specify the alignment between horizontal and vertical

Justify-content attribute

(1) function

Lets you specify how to lay out the remaining white space on the mainaxis in the container, except for the child elements (horizontally and vertically).

(2) when the flex-grow attribute is not 0, the child elements automatically fill the container in the direction of the mainaxis axis, so the justify-content attribute value is invalid.

(3) attribute value

Flex-start: layout all child elements from main-start (default)

Flex-end: layout all child elements starting with main-end.

Center: centers the layout of all child elements.

Space-between: lay out the first child element at main-start, the last child element at main-end, and distribute the white space evenly between all child elements and child elements.

Space-around: distribute the white space evenly 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:solid5pxblue

Flex-direction:row

Width:600px

Height:30px

Justify-content:flex-start

}

Align-items attribute

(1) function

Lets you specify the alignment of child elements, specifying the direction of the crossaxis axis (horizontal vertical, horizontal horizontal). (style properties of container elements)

(2) attribute value

Flex-start: layout all child elements from cross-start (default)

Flex-end: layout all child elements starting with cross-end.

Center: centers the layout of all child elements.

Baseline: if the layout direction of the child element is not consistent with the layout direction of the container, it is worth the effect equivalent to the value of the flex-start attribute. Otherwise, the contents of all child elements are aligned along the baseline.

Stretch: the heights of all child elements in the same line are adjusted to maximum. If no child element height is specified, all child element heights are adjusted to be closest to the container height (when considering the element border and inner margin, the container height is equal to the border width and inner margin of 0).

# content {

Display:flex

Border:solid5pxblue

Flex-direction:row

Width:600px

Align-items:flex-start

}

Align-self attribute

(1) function

Lets you specify the alignment of some child elements individually.

(2) attribute value

Auto: inherits the align-items attribute value of the parent element.

Others can specify that the property value is the same as that of the align-items property.

Align-content attribute

(1) function

When you are in a multiline layout, you can use this property to specify how the rows are aligned.

(2) attribute value

Flex-start: layout all child elements from cross-start (default)

Flex-end: layout all child elements starting with cross-end.

Center: centers the layout of all child elements.

Space-between: lay out the first line at cross-start, the last line at cross-end, and distribute the white space evenly between the lines.

Space-around: distribute the white space evenly between cross-start and the first line, between each line and child element lines, and between the last line and cross-end.

# content {

Display:flex

Border:solid5pxblue

Flex-direction:row

Flex-wrap:wrap

Width:300px

Height:400px

Align-conten:flex-start

}

4calc method

(1) function

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

(2) browser support

So far: browsers above Safari6, Chrome19, Firefox8, Opera12 and IE9 support this method.

# container {

Width:500px

Background-color:pink

}

# foo {

Width:calc (50%-100px)

Background-color:green

}

(3) it can be used to mix different counting units.

# container {

Height:calc (10em+3px)

}

This is the end of the introduction of "how to realize CSS3 multi-column layout, box layout and elastic box layout". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.