What is flex layout
Flex, short for Flexible Box, is designed to provide maximum flexibility to Box models.
Any container can be specified as a Flex layout
.box{
display:flex;
}
Copy the code
Inline elements can also use Flex
.box{
display: inline-flex;
}
Copy the code
The basic concept
Elements with a Flex layout are called Flex containers, or “containers” for short. All of its child elements automatically become container members.
When using Flex layouts, there are two lines: the main axis (horizontal) and the cross axis (vertical), and the default is the main axis alignment
Container attribute
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
The flex – direction attribute
Flex-direction determines the direction of the main axis and contains four apis
- Row (default) : axis horizontal, left to right
- Row-reverse :(horizontal spindle direction), starting at the right end
- Column: The main axis is vertical and the starting point is at the top
- Column-reverse: The main axis is in the vertical direction and the starting point is below
.box{
flex-direction:row | roe-reverse | colume | column-reverse
}
Copy the code
The flex – wrap attributes
Flex-wrap contains three apis
- Nowrap (default) does not wrap lines
- Wrap: The first line is at the top,
- Wrap-reverse: newline with the first line at the bottom
The flex-flow property is a short form of the flex-direction and flex-wrap properties. The default value is Row Nowrap.
The justify – content attribute
Illustration-content defines alignment on the main axis and contains five apis
- Flex-start (default) : left-aligned
- Flex-end: right-aligned
- Center: a center
- Space-between: both ends are aligned with equal intervals between items.
- Space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
Copy the code
The align – the items property
Align-items define the way on the cross axis and contain 5 apis
- Flex-start: Alignment of the starting point of the cross axes.
- Flex-end: alignment of ends of crossed axes.
- Center: Alignment of the midpoint of the cross axis.
- Baseline: The baseline alignment of the first line of text of the project.
- Stretch (default) : If the height is not set or auto is set, the project will occupy the entire height of the container
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
Copy the code
The align – content attribute
The align-content property defines the alignment of multiple axes. This property has no effect if the project has only one axis. Contains six values
- Flex-start: align with the starting point of the cross axis.
- Flex-end: aligns with the end of the cross axis.
- Center: aligns with the midpoint of the intersecting axis.
- Space-between: aligned with both ends of the intersecting axes, with evenly distributed spacing between axes.
- Space-around: The spacing on both sides of each axis is equal. Therefore, the spacing between axes is twice as large as the spacing between axes and borders.
- Stretch (default) : Axis takes up the entire cross axis.
The project properties
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
Order attribute
The order attribute defines the order of items. The smaller the value is, the more advanced it is. The default value is 0.
.item {
order: <integer>;
}
Copy the code
The flex – turns up properties
Flex-grow defines the scale of enlargement.
.item {
flex-grow: <number>; /* default 0 */
}
Copy the code
If the property values are all 1, then bisect the space,
The flex – the shrink properties
Flex-shrink determines the scale of the project, which defaults to 1. If space is insufficient, the project is shrunk
If all projects have a Flex-shrink attribute of 1, they are scaled equally when space is insufficient. If the flex-shrink attribute is 0 for one project and 1 for all other projects, the former does not shrink when space is insufficient.
Negative values have no effect on this property.
Flex properties
The flex attribute is short for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 Auto. The last two attributes are optional.
This property has two shortcut values: auto (1 1 auto) and None (0 0 auto).
A link to the
Flex Layout tutorial by Yifeng Ruan
Flex little game