Traditional layout
- In a traditional layout, we usually use the following methods to achieve the desired effect:
Float + Clear position relative + Absolute display inline-block negative margin
- These layouts can be arbitrarily combined to achieve the desired effect, but also increase the difficulty. Vertical center, for example, is not so easy to achieve
A more flexible layout
- We use Flex layout by setting up a container
display: flex
Turn it into a Flex container, and the elements inside become container members. - Let’s start with a picture
flex-container
flex item
Container properties
display
.container {
display: flex; /* or inline-flex */
}
Copy the code
The four Flex items are automatically lined up
flex-direction
Row: the default spindle direction runs from left to right with the starting point on the left. Row-reverse: the spindle direction runs from right to left with the starting point on the right. Column: the spindle direction runs from top to bottom with the starting point on the top
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
Copy the code
flex-wrap
Wrap: displays wrap-reverse when the container width is insufficient for child elements and reverses the order
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
Copy the code
flex-flow
Is short for flex-direction and flex-wrap. The default values are row and nowrap.
The flex - flow: < > 'flex - direction' | | < > 'flex - wrap'Copy the code
justify-content
Flex-start: left-aligned by default flex-end: right-aligned Center: centered space-between: aligned at both ends space-around: evenly distributed elements
.container {
justify-content: flex-start | flex-end | center: | space-between | space-around;
}
Copy the code
align-items
Side axis alignment Flex-start: Aligns 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. Stretch (default) : Axis takes up the entire cross axis. If the child element is not set to height
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
Copy the code
margin: 10px
The attribute of the item
flex-grow
Define the zoom ratio of item, default is 0, then there is free space will not zoom.
.item {
flex-grow: <number>; /* default 0 */
}
Copy the code
flex-shrink
Define the shrink ratio of item, default is 1, then space shortage will shrink. If 0, the project does not shrink if all other items are 1.
.item {
flex-shrink: <number>; /* default 0 */
}
Copy the code
flex-basis
Defines the size of the main axis that item occupies before allocating extra space. The default is auto, which is the size of the item itself.
.item {
flex-basis: <length> | auto; /* default auto */
}
Copy the code
flex
This attribute is short for flex-grow, Flex-shrink, and Flex-basis. You are advised to use this attribute in preference to the preceding attributes to facilitate browser calculation.
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]}Copy the code
align-self
This attribute defines itself on the side axis to override the align-item of the parent container.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Copy the code
order
Defines the order of items in which the smallest value is first, and the default value is 0 or negative.
.item {
order: <integer>;
}
Copy the code
The last
Our flex layout is perfectly centered in just three lines of code.
.container { display: flex; // Set flex container justify-content: center; Align -items: center; // The side axis is centered}Copy the code