CSS3 Flex Layout

Turn from the desert-http://www.w3cplus.com/css3/a-guide-to-flexbox.html

Reference: http://www.css88.com/book/css/properties/flex/flex-basis.htm

Display:flex | Inline-flex (for telescopic containers, which is the parent element of the scaling project)

This is used to define the scaling container, whether inline or block depending on the value of the setting. At this point, all of his child elements will become the flex document flow, called the scaling project.

Flex-direction (for telescopic container, which is the parent element of the scaling project)

• row (default): Arranges left-to-right in the "ltr" layout mode, and arranges right-to-left in RTL layout.
• Row-reverse: The row is arranged in the opposite direction, in the "ltr" layout mode from right to left, in the "RTL" layout mode from left to right.
• column: similar to row, but arranged from top to bottom
• Column-reverse: similar to Row-reverse, but arranged from bottom to top.

Flex-wrap (for telescopic container, which is the parent element of the scaling project)

• nowrap (default): telescopic container line display, "ltr" layout, scaling items from left to right, "RTL" layout on the right-to-left of the scaling items.
• wrap: telescopic container multi-line display (when the width of a container cannot display all its item in one row, it is displayed more than one line, and nowrap does not, Will force the width of each item to be narrowed), the scaling items are arranged from left to right under the "ltr" layout, and the scaling items are arranged from right to left in the "RTL" layout.
• wrap-reverse: telescopic container multi-line display, "ltr" layout, scaling items from right to left, "RTL" layout, scaling items from left to right in the arrangement. (as opposed to wrap)

Flex-flow (for telescopic container, which is the parent element of the scaling project)

This is an abbreviated version of the "Flex-direction" and "Flex-wrap" properties. The spindle and the side axis of the telescopic container are also defined. The default value is "Row nowrap".

--------------------------------------------------------------------------------------------------
Justify-content (for telescopic container, which is the parent element of the scaling project)

This property allocates extra space when all the scaling items on a row are not scalable or scalable but have reached their maximum length.

• Flex-start (default): The scaling item is aligned to the start of a line.
• flex-end: The scaling item is aligned to the end of the line.
• Center: The Telescopic project aligns to the middle of the line.
• Space-between: The scaling items are evenly distributed in the line. The beginning of the first line in a row, and the last stretch item at the end of a row.
• Space-around: The scaling items are evenly distributed across the line, leaving half the space on both ends.

------------------------------------------------------------------------------------------------------
Align-items (for telescopic container, which is the parent element of the scaling project)

Attention is align-items, not content ....

This is used primarily to define the alignment of a telescopic item on the side axis of the current row of the telescopic container. You can think of him as "justify-content" on the side axis (perpendicular to the spindle).

• flex-start: The outer margin of the starting edge of the side axis of the telescopic item is close to the side where the line starts at the side axis.
• flex-end: The telescopic item is at the edge of the end of the side axis by the margin of the line at the end of the side axis.
• Center: The margin box for the telescopic project is centered on the side axis of the row.
• Baseline: The scaling items are aligned according to their baseline.
• Stretch (default): Stretch Item Extrude fills the entire telescopic container. This value causes the size of the outer box of the project to be as close to the limit as possible following the "min/max-width/height" property
• The dimensions of the row.

---------------------------------------------------------------------------------------------------
Align-content (for telescopic container, which is the parent element of the scaling project)

This is align-content, note : Notice that this property has no effect on a single row of telescopic containers, and is only effective when there is a multiline scaling item

• Flex-start: The rows are stacked to the start position of the telescopic container.
• flex-end: The rows are stacked to the end position of the telescopic container.
• Center: Each row is stacked to the middle of the telescopic container.
• Space-between: The rows are evenly distributed across the telescopic container.
• space-around: The rows are evenly distributed across the telescopic container, with half the space on each side.
• Stretch (default): each row will stretch to occupy the remaining space.

------------------------------------------------------------------------------------------------------------

The following properties are used to scale the item instead of the telescopic container

------------------------------------------------------------------------------------------------------------

Orderby default, scaling items are arranged in chronological order of the document flow. However, the "order" property can control the order in which the scaling items appear in their telescopic container. Align-self

used to overwrite the default alignment on a separate scaling project. for an Introduction to property values, see Property values for "Align-items".

Flex-grow

As needed to define scaling capabilities for scaled projects, cannot be negative, the default value is 0. Example: Item-a Flex-grow is 1,item-b flex-grow is 2, then when these two item can not fully fill the container, they will allocate the remaining space, a points 1/3,b points 2/3.

Flex-shrink

The ability to define the shrinkage of the scaling project as needed, cannot be negative, and the default value is 1. Example: Item-a Flex-shrink is 1,item-b flex-shrink is 2, then when container cannot satisfy the width requirement of item, item will be scaled out of proportion, will allocate the remaining space, a shrinks beyond 1 of space The 3,b shrinks beyond 2/3 of the space.

Flex-basis-does not understand this property ...

This is used to set the scaling reference value, and the remaining space is scaled by the ratio. The default is auto.

Flex

This is an abbreviation for the three properties of "Flex-grow", "Flex-shrink", and "flex-basis". The second and third parameters (Flex-shrink, flex-basis) are optional parameters. The default value is "0 1 auto".

Front

CSS3 Flex Layout