Method of flex layout for display properties in CSS3

In the study of small programs, in the design of the layout of the home page, the new understanding of a layout way Display:flex, this article mainly introduces the CSS3 display properties of the Flex layout method, small series feel very good, now share to everyone, but also for everyone to do a reference, hope to help everyone.

. container {   Display:flex;   Flex-direction:column;   Align-items:center;   Background-color: #b3d4db; }

After compiling the effect is obvious, the layout of the interface is also very reasonable, looks very clear. So what exactly does this attribute do?

Flex is the abbreviation for flexible box, meaning "resilient layout", which provides maximum flexibility for box-shaped models. When set to flex layout, the float, clear, and vertical-align properties of child elements are invalidated.

It can be applied to a container, or it can be applied to inline elements. (explained in conjunction with developer tools) in 2009, the website presented a new solution----flex layout that enables easy, complete and responsive layout of various pages. Currently, it has been supported by all browsers, which means that this feature is now safe to use.

Basic Concepts

Elements that use flex layouts, called Flex container, are referred to as "containers." All of its child elements automatically become container members, known as Flex items (Flex Item), or "project" for short. The container has two axes by default: the horizontal spindle (main axis) and the vertical intersection axis (cross axis). The starting position of the spindle (the intersection with the border) is called main start, the end position is called the main end, the start position of the crossing axis is called Cross start, and the end position is called Cross end. The project is arranged by default along the spindle. The main axis space occupied by a single item is called the main size, and the occupied intersection space is called cross size.

The following 6 properties are set on a container:

• Flex-direction the arrangement of items within a container (default horizontal arrangement)

• Flex-wrap item wrapping method in container

• Flex-flow more than two properties of a shortcut

• Alignment of the Justify-content project on the spindle

• Align-items How the item is aligned on the cross axis

• Align-content defines the alignment of multiple axes. If the item has only one axis, this property does not work.

Flex-direction

. box {2  flex-direction:row | row-reverse | column | column-reverse; 3}

The range of attribute optional values is row (the default) is left-to-right along the horizontal spindle, row-reverse is arranged from right to left along the horizontal spindle, and column is along the vertical spindle right up to the bottom and column-reverse.

Flex-wrap

. box{2  flex-wrap:nowrap | wrap | wrap-reverse; 3}

The range of optional values for the property is nowrap (default) without wrapping, wrap wrapping (first row above) and Wrap-reverse (you know ~)

Flex-flow

. box {2  flex-flow: <flex-direction> | | <flex-wrap>; 3}

The values of the above two methods are used in the notation property | | Connection can be

Justify-content

. box {2  justify-content:flex-start | flex-end | center | space-between | space-around; 3}

The alignment of the project on the spindle (which axis of the spindle depends on the setting of the property flex-direction)

Flex-start: Arranged on the spindle from left or top

Flex-end: Arranged on the spindle from right or bottom

Center: centering on the spindle

Space-between: Starting at the left or right or upper and lower ends of the spindle

Space-around: The intervals on each side of the item are equal. Therefore, the interval between items is one times larger than the interval between items and borders.

Align-items

. box {2  align-items:flex-start | flex-end | center | baseline | stretch; 3}

Here, the direct film illustrates the clearer

Align-content

. box {2  align-content:flex-start | flex-end | center | space-between | space-around | stretch; 3}

The above describes the properties of the container, the following is the properties of the items in the container:

• Order items are sorted. The smaller the number, the higher the alignment, and the default is 0.

• The magnification of the Flex-grow project, which defaults to 0, is not magnified if there is space left.

• The Flex-shrink project is scaled down by default of 1, that is, if there is not enough space, the project will shrink.

• Flex-basis the main spindle space (main size) that the project occupies before allocating extra space. Based on this property, the browser calculates whether the spindle has extra space. Its default value is auto, which is the original size of the project.

• Flex is a shorthand for flex-grow, Flex-shrink, and Flex-basis, with a default value of 0 1 auto. The latter two properties are optional.

• Align-self allows a single item to be aligned differently from other items, overriding the Align-items property. The default value is auto, which represents the Align-items property that inherits the parent element, and, if there is no parent element, is equivalent to stretch.

Order

     . Item {       Order: <integer>;     }

Flex-grow

     . Item {       Flex-grow: <number>;/* Default 0 */     }

Flex-shrink

     . Item {       Flex-shrink: <number>;/* Default 1 */     }

Flex-basis

    . Item {       flex-basis: <length> | auto;/* Default auto */    }

Flex

     . item {       Flex:none | [< ' Flex-grow ' > < ' Flex-shrink ';? | | < ' flex-basis ' >]     }

Align-self

     . item {       Align-self:auto | flex-start | flex-end | center | baseline | stretch;     }

Container properties and Item properties can be used in conjunction with the same inline and inline CSS. I hope you can use it skillfully in practical application.