Css3 elastic box model flex Quick Start and getting started 1, css3flex

Css3 elastic box model flex Quick Start and getting started 1, css3flex

1. What is flex?

Flex is a layout method introduced in css3. It can flexibly and efficiently control the arrangement and alignment of elements. Most people call it elastic layout.

Ii. How to Use flex?

Any container can be specified as a flex Layout

1 #box {2     display:flex;3 }

III. Basic Terms of flex

• Elements with a flex layout are calledFlex container)Its child element isFlex item).
• The flex container contains two vertical axes, namelyMain axis)AndCross axis).
• Flex elements along the spindleMain start)ToMain end)Arrange the data in sequence.
• If the flex container contains multiple lines of flex elementsFlex lines)Slave along the secondary axisCross start)ToCross end)Arrange the data in sequence.
• The spindle space occupied by a single flex element is calledSpindle length (main size)The space occupied by the subaxis is calledCross size).

4. Six attributes are set on the parent container to control the display mode of child elements:

Attribute	Description
flex-direction	Spindle direction
flex-wrap	Line feed Style
flex-flow	Abbreviations of the first two
justify-content	Spindle alignment
align-items	Secondary axis alignment of a single row
align-content	Multi-row sub-axis alignment

V. flex-direction: Set the alignment direction of the spindle,There are four values:

• row(Default): the spindle is in the horizontal direction and the start point is at the left end.
• row-reverse: The spindle is in the horizontal direction and the start point is in the right end.
• column: The spindle is in the vertical direction, and the starting point is in the upper direction.
• column-reverse: The spindle is in the vertical direction, and the start point is in the bottom.

1 <! DOCTYPE html> 2 
Flex-direction is set to row:

Flex-direction is set to row-reverse:

Flex-direction is set to column. The following section only captures the first five Divs. If the latter is captured, the image occupies too many positions, affecting the user experience.

Set flex-direction to column-reverse:

6. flex-wrap: defines how to wrap a child element over a row. Common attribute values:

 

 
  
Nowrap (default): no line feed by default.
 
  
Wrap: line feed. The second line is under the first line, from left to right.
 
  
Wrap-reverse: line feed, the second line above the first line, left to right

 
1 #box {2     display: flex;3     flex-direction: row;4     flex-wrap: nowrap;5 }
Flex-wrap: nowrap;
Flex-wrap: wrap;
Flex-wrap: wrap-reverse;
 
7. flex-flow: Short for flex-ction and flex-wrap. The default value is row nowrap.
1 #box {2     display:flex;3     /* flex-flow: row nowrap; */4     /* flex-flow: row wrap; */5     /* flex-flow: row wrap-reverse; */6     /* flex-flow: row-reverse wrap-reverse; */7     flex-flow: column wrap;8 }
8. justify-content: Alignment of child elements on the spindle

 

 
  
flex-start(Default): Left alignment
 
  
flex-end: Right-aligned
 
  
center: Center
 
  
space-between: The two ends are aligned, and the interval between projects is equal.
 
  
space-around: The two sides of each project are separated equally.

 
1 #box {2     display:flex;3     flex-flow: row wrap;4     /* justify-content: flex-start; */5     /* justify-content: flex-end; */6     /* justify-content: center; */7     /* justify-content: space-between; */8     justify-content: space-around;9 }
The difference between space-between and space-around is clarified here: justify-content: space-;
 
Justify-content: space-around;