Flex Layout--Review

Flex is a resilient layout.
Any container can be specified as a flex layout.
. Box{display:flex}
Inline elements can use the Flex layout
. Box{display:inline-flex}
The browser of the WebKit kernel must be prefixed with the-webkit.
. Box{display:-webkit-flex; Display:flex;}
Note: After the element is set to flex layout, the child elements are float, and the clear and Vertical-align properties are invalidated.
Basic concepts:
The element that uses the flex layout is called the Flex container, and all its child elements automatically become container members, called Flex
Project.
The container has a default of two axes, a horizontal spindle (main axis) and a vertical crossing axis (cross axis). The starting position of the spindle (the intersection with the border) is called main start, and the end position is called main end;
The starting position of the intersection is called Cross start, and the end position is referred to as crossing start, and the technical location is cross end.
The main spindle space occupied by a single item is called the cross-axis space occupied by the main size, which is called crosses size.

Properties of the container:
There are 6 properties set on the container.
Flex-direction Flex-wrap Flex-flow justify-content
Align-items align-content
1.flex-direction
Properties determine the direction of the spindle (that is, the direction in which the item is arranged)
. Box{flex-direction:row | row-reverse | column | Column-reverse;}
The row (default) spindle is the horizontal direction, starting at the left end.
Row-reverse: The spindle is in the horizontal direction, starting at the right end.
Column: The spindle is in the vertical direction, starting at the top edge.
Column-reverse: The spindle is in the vertical direction, starting at the bottom edge.
2.flex-wrap Property
By default, items are arranged on a line (also called an axis), and the Flex-wrap property is defined, if an axis
Not arranged, how to break the line.
. box{flex-wrap:nowrap | wrap | wrap-reverse;}
NoWrap (default): No Line break.
Wrap: Wrap, the first line is above.
Wrap-reverse: Line break, the first line is below.
3.flex-flow
The Flex-flow property is a shorthand for the Flex-direction property and Flex-wrap property, and the default value is row nowrap.
. box{flex-flow:<flex-direction> | | <flex-wrap>;}
4.justify-content Property
property defines how the item is aligned on the spindle.
. Box{justify-content:flex-start | flex-end | center | space-between | Space-around;}
5 values, the specific alignment is related to the direction of the axis, the following assumes that the spindle is from left to right.
Flex-start (default): Left Justified
Flex-end Right Alignment
Center Center
Space-between: Justified, the interval between items is equal.
Space-around: The spacing between each item is equal, so the interval between items is twice as large as the interval between items and borders.
5.align-items
property defines how the item is aligned on the intersection axis.
. Box{align-items:flex-start | flex-end | center | baseline | stretch;}
5 values may be taken, the specific alignment is related to the direction of the cross axis, and the following assumes that the cross axis is top to bottom.
Flex-start: The start alignment of the intersection axis.
Flex-end: The end alignment of the intersection axis.
Center: The midpoint of the cross-week alignment.
Baseline: The baseline alignment of the first line of text for the item.
Stretch (default) if the item is not set to height or set to auto, it fills the height of the entire container.
6.align-content Property
A property defines the alignment of multiple axes, which does not work if the item can have only one axis.
. Box{align-content:flex-start | flex-end | center | space-between | space-around |
Stretch;}
A property has 6 values.
Flex-start: Aligns with the starting point of the intersection axis.
Flex-end: Aligns with the end of the intersection axis.
Center: Aligns with the midpoint of the intersection axis.
The Space-between is aligned with the intersection axis and the interval between the axes is evenly distributed.
Space-around: The intervals between each axis are equal.
Stretch (default): The axis fills the entire cross axis.

Properties of the project
You can set 6 properties on a project.
Orderflex-growflex-shrinkflex-basisflexalign-self

1.order Properties
The Order property defines the order in which the items are arranged, the values are the smallest, the alignment is higher, and the default is O.
. Item {order: <INTEGER>;}
2.flex-grow Property
The Flex-grow property defines the magnification of the item, which defaults to 0, which is also magnified if there is space left.
. Item {flex-grow: <number>;}
If all projects have flex-grow zodiac of 1, they will Dengfeng the remaining space if a project's
The Flex-grow property is 2, and the other items are 1, the former occupying more than one more space than the other items.

3.flex-shrink Property
The Flex-shrink property defines the scale-out for the project, which defaults to 1, which means that the project will shrink if there is not enough space.
. Item{flex-shrink:<number>;}
If all items have a Flex-shrink property of 1, they will be scaled down when there is not enough space.
If the Flex-shrink property of an item is O and the other items are 1, then when there is not enough space, the former
does not shrink. A negative value is not valid for this property.
4.flex-basis Property
property defines the spindle space that the project occupies before allocating extra space, which the browser calculates based on this property.
Does the spindle have extra space? Its default value is auto, which is the original size of the project.
. Item {flex-basis: <length> | auto;}
He can be set to some kind of value with the width or Height property, then the item will occupy a fixed space.
5.flex Properties
The Flex property is Flex-grow. Shorthand for Flex-shrink and Flex and flex-basis, default values
is 0 1 auto. The latter two properties are optional.
. Item {Flex:none | [< ' Flex-grow ' > < ' flex-shrink ' >? | | < ' flex-basis ';]}
This property has two shortcut values: Auto (1 1 Auto) and none (0 0 Auto).
Instead of writing three separate attributes, it is recommended that you use this property first.
Because the browser will calculate the relevant values
6.align-self Property
The Align-self property allows a single item to be aligned differently from other items and can be
Overrides the Align property, the default value is auto, which represents the Align-items property that inherits the parent element
If there is no parent element, it is equal to stretch.
. Item{align-self:auto | flex-start | flex-end | center | baseline | stretch;}
This property may take 6 values, except auto, and the other is exactly the same as the Align-items property.

More flex Layouts-Review related articles please follow topic.alibabacloud.com!

