flex layout
Means to replace the floating layout;
Must first element to the elastic container; // display: flex;
An element can be both elastic container and an elastic element;
After the layout is set to flex, child elements float, clear, and vertical-align attribute will fail.
Spindle: an elastic element arranged in a direction;
The elastic properties of the container
1, flex-direction determines the direction of the spindle
row: default value, from left to right;
row-reverse: from right to left;
column: from top to bottom;
column-reverse: from bottom to top;
2, flex-wrap decide whether to wrap
nowrap: default value, does not wrap;
wrap: wrap, over the first line;
wrap-reverse: wraps, below the first line;
3、flex-flow
Shorthand flex-direction and flex-wrap, the default value is the row nowrap;
//flex-flow： row wrap；
4, justify-content determines the elastic element is aligned on the spindle
flex-start: default value, left alignment;
flex-end: the right-aligned;
enter: center;
space-between: justification, the spacing between the elastic elements are equal (both sides of the elastic element and the frame there is no distance);
space-around: on both sides of each elastic spacer elements are equal (distance between the elastic element is larger than the spacing elastic double border elements)
5, align-items to determine how the sub-element vertically aligned (single) in the parent box
flex-start: start point along the minor axis aligned with, from the starting point has been discharged to the (arrowed) end;
flex-end: the end of the minor axis is aligned along, starting from the end point has been ranked;
center: center aligned;
baseline: baseline alignment;
stretch: the default values, so that the child elements stretch to accommodate the parent element (not a child element to the height of the premise);
6, align-content determined where multiple rows of vertically aligned (single row invalid)
The property came into force conditions:
Property must be set free box of the parent element // display: flex;
And arranged to laterally aligned arrangement // flex-direction: row;
And set wrap // flex-wrap: wrap;
Property values:
1) stretch: Default, stretches the space occupied by the container of each row, filling way to increase the gap beneath each row;
The first default start row from the top of the container arrangement.
2) cancel the blank between the rows and rows and rows of all as a whole,
center: vertically centered on the vertical axis;
flex-start: on top of the container;
flex-end: on the bottom of the vessel;
3) space-between: the line above the top of the vessel is aligned, the lowermost row are aligned at the bottom of the container. Remain the same space between each row.
(Close contact alignment is no space left);
space-around: the vertical position of each row of the blank to retain the same length, so that the gap between the double rows of single row blank.
Elastic properties of the elements
1, order the decision ordering the child element
The smaller the value the more forward, can be negative, it defaults to zero; // order: 1;
2、 flex-grow
Stretching coefficient determination sub-element, prorated in the remaining space in the parent element; // flex-grow: 1;
If all items are flex-grow a property, they aliquots remaining space (if any);
flex-grow property if a project is 2, other projects are 1, then the remaining space is occupied by the former than the other items more than doubled.
3、flex-shrink
Contraction coefficient determinant element, when the parent element is insufficient space to accommodate all child elements; // flex-shrink: 1;
If the flex-shrink attribute all items are 1, when the lack of space, will be scaled down;
flex-shrink property if a project is zero, other projects are 1, when the lack of space, the former does not shrink.
4、flex-basis
Specifies the length of the sub base element of the main shaft;
If the transverse spindle, the specified value is the width, i.e. the longitudinal direction is specified height;
The default value is auto, indicating the reference element itself width / height, has passed the specific numerical value places subject;
5, flex: reduced growth basis
flex-grow, flex-shrink, flex-basis attribute shorthand;
initial --- flex: 0 1 auto；
Auto --- flex: January 1 seat;
none --- Flex: Auto 0 0; not elastically resilient element, Notations diminished;
6、align-self
It allows a single child element has child elements other on different longitudinal alignment, may cover the align-items property;
The default value is auto, inherited from the parent table of elements align-items attributes, if no parent, it is equivalent to the stretch
Attribute values: auto, flex-start, flex-end, center, baseline, stretch;
// spent two hours finishing, for me, quite used, the more the more difficulty to break, come together A pair, Chong Chong Chong! !