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

This article mainly explains "what are the basics of CSS3 elastic box". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn the basics of CSS3 elastic box.

1. Brief introduction

The    elastic box model (Flexible Box or FlexBox) is a new layout module of CSS3, officially known as CSS Flexible Box Layout Module, which is used to align, orient, sort items in the container (even in the case of project size, location and dynamic generation) and allocate blank space. The biggest feature of the elastic box model is that it can dynamically modify the width and height of the child elements to meet the appropriate layout under different screen sizes.

Second, basic knowledge

The    elastic box is composed of an elastic container (flex container) and an elastic sub-element (flex item). The elastic box has a main axis (main axis) and a longitudinal axis (cross axis). The elastic sub-elements are arranged along the principal axis in turn, and the side axis is perpendicular to the principal axis. The spindle start (main start), the spindle end (main end) and the side axis start (cross start) and the side axis end (cross end) of the elastic container represent the start and end positions of the arrangement of elastic subelements. You can look at the picture below for details.

III. Attribute classification

1. Related properties of elastic containers

Attribute description

Flex-direction sets the direction of the spindle to determine the arrangement of elastic subelements

Whether flex-wrap wraps lines when elastic child elements are outside the range of the elastic container

Shortcuts to flex-flowflex-direction and flex-wrap, composite properties

Justify-content sets the alignment on the spindle of elastic sub-elements

Align-items sets the alignment on the side axis of the elastic sub-element

Sets the alignment of the side axes of elastic sub-elements when there is a blank and multiple lines on the align-content side axis

A. Flex-direction attribute

Usage: flex-direction:row | row-reverse | column | column-reverse

Meaning of attribute value

Row (default) the principal axis is horizontal. Sort in the same direction as the document order of the page. If the document order is ltr, the order is from left to right; if the document order is rtl, the order is from right to left.

The principal axis of row-reverse is horizontal. Sort in the opposite direction to the document order of the page.

The principal axis of column is vertical. In order from top to bottom

The principal axis of column-reverse is vertical. In order from bottom to top

The effect of its properties is as follows:

B. flex-wrap attribute

Usage: flex-wrap: nowrap | wrap | wrap-reverse

Meaning of attribute value

Do not wrap when nowrap (default) overflows

Automatic line wrapping when wrap overflows

Automatic line wrapping and flipping arrangement when wrap-reverse overflows

The effect is as follows:

C. Flex-flow attribute

Usage: flex-flow: [flex-direction] | | [flex-wrap]

Meaning: compound attributes (flex-direction and flex-wrap), setting the arrangement of elastic sub-elements

D. Justify-content attribute

Usage: justify-content: flex-start | flex-end | center | space-between | space-around

Meaning of attribute value

Flex-start (default) Spindle alignment starts, Spindle is horizontal, left alignment in ltr environment

Flex-end spindle ends alignment, spindle is horizontal axis, right alignment in ltr environment

Center Center alignment

Space-between is the first and last to align the edges of the elastic container, and the rest are evenly distributed.

All space-around are uniformly distributed

The effect is as follows:

E. align-items property

Usage: align-items: flex-start | flex-end | center | baseline | stretch

Meaning of attribute value

The flex-start side axis begins to align, the principal axis is horizontal, and the top is aligned.

Flex-end side axis ends alignment

Center Center alignment

Baseline baseline alignment

Stretch (default) covers the entire side axis from the beginning of the side axis to the end of the side axis

The effect is as follows:

F. Align-content attribute

Usage: align-content: flex-start | flex-end | center | space-between | space-around | stretch

Meaning of attribute value

Flex-start spindle begins to align, principal axis is horizontal axis, left alignment in ltr environment

Flex-end spindle ends alignment, spindle is horizontal axis, right alignment in ltr environment

Center Center alignment

Space-between is the first and last to align the edges of the elastic container, and the rest are evenly distributed.

All space-around are uniformly distributed

Stretch (default) the lines stretch to take up the remaining space. If the remaining space is negative, the value is equivalent to flex-start

The effect is as follows:

two。 Related attributes of elastic subelements

Meaning of attribute value

Order controls the order of sub-elements in the elastic container. If the value is small, it can be negative.

Flex-grow sets the expansion ratio of elastic child elements

Flex-shrink sets the shrinkage ratio of elastic child elements

Flex-basis specifies the default size value before the elastic child element is stretched, which is equivalent to the width and height attributes

Compound properties of flexflex-grow,flex-shrink and flex-basis attributes

Align-self allows independent elastic sub-elements to override the default alignment setting (align-items) of elastic containers

A. Order attribute

Usage: order: integer number

The attribute effect is as follows:

B. flex-grow attribute

Usage: flex-grow: number

Meaning: sets the expansion ratio of elastic subelements, which is not allowed to be negative, and the default value is 0. The remaining space is allocated according to the expansion factor set by the elastic box element as a ratio.

The attribute effect is as follows:

C. Flex-shrink attribute

Usage: flex-shrink: number

Meaning: set the shrinkage ratio of elastic subelements. Negative values are not allowed. The default value is 1. Shrink the space according to the expansion factor set by the elastic box element as a ratio.

The attribute effect is as follows:

D. Flex-basis attribute

Usage: flex-basis: | | auto

Meaning: sets the stretch base value of the elastic sub-element, which is not allowed to be negative. The default value is auto and there is no specific width (height).

E. flex property

Usage: flex: none | [flex-grow] | | [flex-shrink] | | [flex-basis]

Meaning: compound attributes, setting how to allocate space for elastic subelements

F. Align-self attribute

How to use: auto | flex-start | flex-end | center | baseline | stretch

Meaning: sets the alignment of elastic elements on the side axis, the same as align-items. Sets the opposite alignment of an elastic element.

The attribute effect is as follows:

3. Detailed explanation of multi-column attributes

1) basic knowledge

   Multi-column is a new layout module for CSS3, officially known as Multiple column layout, which can easily implement multi-column layout, such as image waterfall flow.

2) list of attributes

Attribute description

Columns compound properties (column-width and column-count), setting width and number of columns

Column-width sets the width of each column

Column-count sets the number of columns

Column-gap sets the gap between columns

Column-rule compound properties (column-rule-width, column-rule-style, and column-rule-color) to set the border style between columns

Column-fill sets whether the height of the column is uniform.

Whether the column-span setting spans all columns

A. Column-width attribute

Usage: column-width: length | auto

Meaning of attribute value

Auto (default) the browser determines the width of the column

Length defines the column width with a length value. Negative values are not allowed

B. column-count attribute

Usage: column-count: integer number | auto

Meaning of attribute value

The number of auto (default) columns will depend on other properties, such as "column-width"

Imteger number uses integer values to define the number of columns, and the optimal number of columns prevents the contents of the elements from flowing out.

C. Columns attribute

Usage: columns: [column-width] | [column-count]

Meaning: the compound property sets the width and number of columns

D. Column-gap attribute

Usage: column-gap: length | normal

Meaning of attribute value

Normal (default) is the same size as font-size. Assuming that the font-size of the object is 16px, the value of normal is 16px, and so on.

Length defines the gap between columns in terms of length. Negative values are not allowed.

E. column-rule property

Usage: column-rule: [column-rule-width] | | [column-rule-style] | | [column-rule-color]

Meaning: sets the border between columns, similar to the border property

Meaning of attribute value

Column-rule-width sets the thickness of the border between columns

Column-rule-style sets the style of the border between columns

Column-rule-color sets the color of the border between columns

F. Column-fill attribute

Usage: column-fill: auto | balance

Meaning: set whether the height of all columns is uniform

Meaning of attribute value

Auto (default) column highly adaptive content

The height of all columns in balance is unified by the highest column.

G. column-span attribute

Usage: column-span: none | all

Meaning: whether the object element spans all columns

Meaning of attribute value

None (default) does not span columns

All spans all columns

At this point, I believe you have a deeper understanding of "what are the basics of CSS3 elastic boxes?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.