Summary of the Flex
Elastic box model (flex), we generally used to implement the page layout, of course flex usage is very flexible, in addition to a plurality of cassette blocks arranged horizontally, we can also use flex lines for a plurality of cassettes of the same row in the horizontal and vertical the arrangement direction of the effect, such as a plurality of line span tags, we want its horizontal alignment, can display attribute was added flex, then justify-content value of space-between, can be realized, including the horizontal direction, we want different vertical height of the box is centered, may be used align-items or align-content, center attribute value can be realized, of course, other effects if desired, may take different attributes and attribute values.
Flex Set display property (elastic box model), first conventional cassette blocks arranged as follows:
After setting the Display property value flex, block elements horizontally arranged can be achieved:
The properties of the container
1, flex-direction to determine the alignment direction of the sub-elements (i.e., the arrangement direction of the project)
Value 1: row default value, the horizontal direction of the spindle, the sub-elements from left to right;
Value 2: row-reverse: horizontal spindle direction, starting at the right end of the vessel, in reverse order (flex-direction: row-reverse ;);
value 3: column, cross shaft arrangement (flex-direction: column;)
value 4: column-reverse; in the box so that cross-axis to achieve reverse order (Flex-direction: Reverse-column;)
2, Flex-fit line if a predetermined wrap how newline.
When the element width is greater than the total width of the container, will involve wrap or not, the amount of container becomes default, all items are ranked in a line, flex-wrap defines how less than if the discharge line wrap. It has three possible values:
(. 1) nowrap (default): not wrap. Even if the total width of the box is greater than the width of the container does not wrap
(2) wrap: wraps, the surplus will wrap without pinching (Flex-wrap: wrap;)
(. 3) wrap-Reverse: line feed, not only wrap, but also in reverse order from the bottom up. (Flex-wrap: wrap-reverse ;)
justify-content is defined on the spindle of the ## title aligned ways
justify-content defines the project is aligned on the spindle. It has six possible values:
(. 1) Start-Flex (default) is aligned to the start position of the spindle, which is arranged starting from the starting position of the spindle. (The justify-Content: Start-Flex;)
(2) End-Flex: a position aligned to the spindle end, thus abutting the end of the main shaft, but does not affect the order of elements. (The justify-Content: End-Flex;)
(. 3) Center: centered (justify-content: center;) centered on the spindle direction
(4) space-between; justification, it is noted that the left and right ends of elements will space is against the left and right sides of the container, the remaining (major axis direction) equally among the remaining elements. (The justify-Content: Space-BETWEEN;)
(. 5) Space-around; dispersion aligned, to be noted that elements do not abut against the left and right both ends of the left and right sides of the container (note the distinction between aligned and aligned at both ends and an average difference ), the remaining space in the container (spindle direction) evenly distributed by the element into the direction of their start and end of the spindle (note that the major axis direction is horizontal or vertical) sides (left and right from the elements and thus the container on both sides of the edge elements of the only half the distance between). (The justify-Content: Space-BETWEEN;)
(. 6) Space-EVENLY; evenly, it is to allocate all remaining space on average in all directions main container; dispersion aligned and the difference is, the distance between each element and a spindle the distance between the start and the end edge of the element and the sides of the container are the same general direction. (Justify-content: space-evenly ;)
align-items define how projects are aligned in the cross-axis (vertical axis)
align-items define the attribute item (Also note that if the spindle has changed direction) should be aligned on the cross shaft. It may take five values. DETAILED alignment direction intersecting the axis-related, cross-axis from top to bottom the following is assumed.
(1) flex-start: the starting point of cross-axis alignment (and default values). (Align = left-items: Flex-Start;)
(2) End-Flex: end cross-axis alignment. (Align = left-items: Flex-End;)
(. 3) Center; the cross direction of the central axis aligned; (align-items: center)
align-content defines a plurality of axes (multi-line) alignment
(1) flex-start: the starting point of cross-axis alignment; (align = left-Content: Flex-Start;)
(2) Flex-End: cross-axis swollen point alignment; (align = left-Content: Flex-End;)
(. 3) center; axis intersecting a midpoint; (Content-align = left: center;)
(. 4) Space-around; dispersion aligned, to be noted that the elements do not intersect both ends of the shaft against the sides of the container (note the distinction between the two ends, and alignment, and the difference between the average alignment), the remaining space in the container (the cross-axis direction) of the elements evenly to their start and end cross-axis direction (note the cross direction is a horizontal or vertical axis) of both sides (and therefore the cross shaft elements from both sides of the edge of the container half) the distance between the elements. (Content-align = left: Space-BETWEEN;)
(. 5) Space-BETWEEN; justification, it is noted that both ends of the project will have cross-axis against the left and right sides of the container, (major axis direction) from the rest of the space remaining elements equally. . (Content-align = left: Space-BETWEEN;)
(. 6) Space-EVENLY; evenly, is to have evenly on all containers remaining space intersecting the axial direction; and a difference between the dispersion is aligned, the distance between each item and cross-axis direction and the end of the project the distance between the sides of the container rim is large as the start. (Align-content: space-evenly ;)
The project properties
1, flex-grow; the default value is 0, the sub flex container provided for the parent container divide the remaining space, we can set the value, the greater the higher the weight assigned a weight value between the respective item.
Such items originally in the container are arranged in such a manner (not support full container)
prosthesis into a cassette 3 is provided a flex-grow, the box 3 will hold the remaining space filled container (flex-grow on the spindle: 1; the as shown in FIG.)
2, Order attribute defines the sort items, the smaller the value, the more forward arrangement, the default value is 0, for example, we attribute value 3 to the box 1, the box 2 to the attribute value of 2, 4 of the box 3 , the box 1 is 4, so the sub-box will be the order of 1234 becomes 3241.
3, flex-shrink attribute defines the reduction ratio of the items, the default value is 1, if all the items are the default attribute value 1, when there is insufficient space will be scaled down. If a project in which the property is 0, 1 other default, when the lack of space, the former does not shrink. (This property is not negative), as shown below, box 4 flex-shrink attribute value is set to 0, the default other cassette 1, when the lack of space, the box 4 is not reduced.
4, flex-basis attribute defines the spindle space before allocating extra space, occupied by the project. Browser based on this property to calculate whether the spindle has enough free space. The default value of auto (the original size of the project).
5, flex property, which is a flex-grow, flex-shrink and flex-basis shorthand, default value 0 1 auto, the two values may be selected according to their values or not to need (the default), but also Note the order between them.
6, align-self attribute set to a single item, allowing a single item and other items may have different arrangements (weight is greater than align-item attribute default value auto).
