Flexible layout:
flexsible Box
property: display: flex; inline-flex;
note: float, clear, vertical-align; invalid
1. Concept: Elements using flex layout become flex container (flex container), child elements, flex items (flex itme);
arrangement direction of child elements: main axsis: main axis (x axis) cross axsis: cross axis (y axis) );
Container property:
set on the container for unified control of child elements
1. flex-direction:
Function: Arrangement of items in the direction of the main axis:
Value: 1, row (horizontal - from left to right)
2. row-reverse ( Horizontal - from right to left)
3. column (from top to bottom)
4. column-reverse (from bottom to top)
2. flex-wrap:
function: how to wrap when one line is not displayed completely
1. wrap: wrap
2. nowrap: no line break, the default is to scale the item proportionally
3, wrap-reverse: wrap line, put the first line at the bottom
3. flex-flow:
Function: It is a comprehensive property of flex-direction and flex-wrap;
value: 1. Default row nowrap;
2. Set by yourself;
4. justify-content:
role: define the arrangement of items on the main axis
Value: 1, flex-start: items are aligned according to the starting point of the main axis
2, flex-end: items are aligned according to the end point of the main axis
3, center: centered
4, space- between: the gap between the two sides of each two items is the same
5, space-around: both ends are aligned, the gap between the two items is the same and is twice the gap between the item and the border;
5. The role of align-items
: Define the arrangement of items on the cross axis
Note: Mainly for a line of items
Value: 1, flex-start:
2, flex-end:
3, center:
4, baseline: (baseline) No. The baseline of a line of text is aligned with it
. 5. Stretch: The default item does not have a height or auto set, which will fill the entire container with the item;
6. align-content:
role: a control for the arrangement of items for containers with multiple axes (automatic wrapping)
1. flex-start: cross-axis starting point alignment
2, flex-end:
3, center:
4, space- between: Align both ends of the cross axis
5, space-around:
Item properties:
1. Order: Sort
Function: Define the order of items.
Value: Integer, Features: The smaller the number, the higher the top
1. Default value: 0
2. Custom:
2. flex-grow:
function: enlargement ratio If the current arrangement axis () has free space, the item will have a phenomenon of proportional enlargement:
value: positive integer;
condition: 1) only one element takes the value 1, accounting for The remaining space is full;
2) Multiple elements take the value of 1, and they equally divide the remaining space;
3. flex-shrink:
Function: This property defines the ratio of the shrinkage of the item, the default value is 1;
the value: a positive integer;
conditions: 1, the value is 0, the item is reduced when the space is insufficient
2, the value is 1, the space 4. flex
-basis:
function: specify the size of the space occupied by the item
: 1. auto, the default value of the item itself;
2. length: specify the width and height (depending on the axis selected by the container; )
5. flex:
role: flex-grow, flex-shrink, flex-basis comprehensive properties;
value: 1, custom;
2: auto (can be stretched freely -
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
)
3: none(
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
);
6, align-self ()
function: set the element on the cross axis separately and other The elements are arranged in different ways;
Note: When the item uses this property, the align-items property will be invalid
. Values: 1, auto: inherit the parent element property
2, flex-start:
3, flex-end;
4, center;
5、baseline：
6、stretch;