Preface
Learn Flex layout for the first time to record and organize notes.
One, Flex
Introduction
- The flexbox model, a CSS layout method, can be used instead of float.
- The elements are flexible and change with the page size.
basic concept
1. Flexible container
- Use the basis of Flex layout, which is to set an element as a flexible container
- Setting method:
- Block-level flexible container
- In-line flexible container
display:flex;
display:inline-flex;
2. Elastic elements
- The child elements of the elastic container are elastic elements
- Can be nested declarations, that is, flexible elements can also be flexible containers
3. Spindle
- Direction of arrangement of elastic elements
4. Cross axis (auxiliary axis)
- Perpendicular to the main axis
2. Basic attributes
1. The properties of the container
- flex-direction:
- Property value: row (default value) | row-reverse | column | column-reverse
- flex-wrap:
- Property value: nowrap (default value) | wrap | wrap-reverse
- justify-content:
- Property value: flex-start (default value) | flex-end | center | space-start | space-end | space-evenly
- align-items:
- Property value: stretch (default value) | flex-start | flex-end | center | baseine
- align-content:
- Property value: flex-start (default value) | flex-end | center | space-start | space-end | space-evenly
flex-direction
Specify how to sort elastic elements
row
- Horizontal direction, from left to right, default value
- At this time, the main axis is horizontal, from left to right
row-reverse
- Reverse horizontal direction, from right to left
- At this time, the main axis is horizontal, from right to left
column
- Vertical direction, top down
- At this time, the main axis is vertical, from top to bottom
column-reverse
- Vertical opposite direction, bottom up
- At this time, the main axis is vertical, from bottom to top
ul{
display:flex;
flex-direction: row|row-reverse|column|column-reverse
}
flex-wrap
Specifies whether the element will wrap
nowrap
- The element will not wrap automatically, the default value
wrap
- The element wraps automatically along the minor axis
wrap-reverse
- Elements wrap automatically along the opposite direction of the minor axis
ul{
display:flex;
flex-direction:row;
flex-wrap: nowrap|wrap|wrap-reverse;
}
note
- flex-flow:
- Shorthand attributes for wrap and direction, the attribute values are in no order, separated by spaces
justify-content
Specify how the remaining space on the main axis is allocated (how the elements are arranged on the main axis)
flex-start
- The default value, the remaining space is not allocated
- Elements are arranged from the starting point of the main axis
flex-end
- The remaining space is not allocated
- The elements are arranged from the end of the main axis
center
- Elements are centered on the main axis
- The remaining space is allocated on both sides of all elements
space-around
- The remaining space of the main axis is allocated to both sides of each element
- The middle space is twice the side space
space-between
- The remaining space of the spindle is evenly distributed among the elements
space-evenly
- The remaining space of the spindle is allocated to one side of each element
- Low compatibility, use with caution
ul{
display:flex;
justify-content: flex-start|flex-end|center|space-around|space-between|space-evenly;
}
align-items
Specify how the elements are aligned on the minor axis
stretch
- Defaults
- Extend the element to ensure that the length value of each line element is the same, and fill the entire line (the element does not set the height or the height is auto)
flex-start
- The elements are not stretched and aligned along the starting point of the minor axis (of each row)
flex-end
- The element is not stretched and aligned along the end point of the minor axis (of each row)
center
- Align center along the minor axis (of each row)
baseline
- Align with the baseline of the first line of the element
- Suitable for elements with different text sizes, not commonly used
ul{
display:flex;
align-items: stretch|flex-start|flex-end|center|baseline;
}
align-content
Specify how the remaining space on the secondary axis is allocated (how the elements are arranged on the secondary axis), similar to the justify-content property
flex-start
- The default value, the remaining space is not allocated
- Elements are arranged from the starting point of the minor axis
flex-end
- The remaining space is not allocated
- Elements are arranged from the end of the secondary axis
center
- Elements are centered on the secondary axis
space-around
- The remaining space of the auxiliary axis is allocated to both sides of each element
- The middle space is twice the side space
space-between
- The remaining space of the auxiliary axis is evenly distributed among the elements
space-evenly
- The remaining space of the secondary axis is allocated to one side of each element
- Low compatibility, use with caution
ul{
display:flex;
align-content: flex-start|flex-end|center|space-around|space-between|space-evenly;
}
2. Element attributes
- order:
- Property value: 0 (default value)
- flex-grow:
- Property value: 0 (default value)
- flex-shrink:
- Property value:
- flex-basis:
- Property value:
- align-self:
- Property value:
order
Specify the order of elements
- Arbitrary number, elements with larger numbers are placed behind
- Default value: 0
li:nth-child(1){
order:2;
}
li:nth-child(2){
order:3;
}
li:nth-child(3){
order:1;
}
flex-grow
The growth factor of the specified element
- Default value: 0
- The remaining space is allocated to the elements in proportion, that is, the elements grow in proportion
li:nth-child(1){
flex-grow:0;
}
li:nth-child(2){
flex-grow:3;
}
li:nth-child(3){
flex-grow:1;
}
flex-shrink
The reduction factor of the specified element
- Default value: 1
- The size of the reduction is related to the reduction factor and the size of the element itself
li:nth-child(1){
flex-shrink:0;
}
li:nth-child(2){
flex-shrink:2;
}
li:nth-child(3){
flex-shrink:15;
}
flex-basis
Specify the initial size of the element on the main axis
- If the main axis is horizontal, specify the element width; if it is vertical, specify the element height
- Default value: auto (the height or width of the element itself)
- Pass the value to change the height or width of the element
ul{
dispaly:flex;
flex-direction:row;
}
li:nth-child(1){
flex-basis:auto;
}
li:nth-child(2){
flex-basis:100px;
}
li:nth-child(3){
flex-basis:10px;
}
ul{
dispaly:flex;
flex-direction:column;
}
li:nth-child(1){
flex-basis:auto;
}
li:nth-child(2){
flex-basis:100px;
}
li:nth-child(3){
flex-basis:10px;
}
note
flex:
- Shorthand properties of flex-grow, flex-shrink and flex-basis, the property values have a fixed order
- Property value:
- initial:
equivalent to flex: 0 1 auto; the
element will not grow, but will shrink, and the size will be set according to its own width and height- auto:
equivalent to flex: 1 1 auto; the
element will grow and shrink, and the size will be set according to its own width and height- None is
equivalent to flex: 0 0 auto; the
element is completely inelastic, will not grow, will not shrink, but will set the size according to its own width and height
align-self
Overwrite align-items on the current element
stretch
- Defaults
- Only stretch this element to fill the entire line (the element has no height set or the height is auto)
flex-start
- Do not stretch this element, just align it along the starting point of the minor axis (of the row)
flex-end
- Do not stretch this element, just align it along the end point of the minor axis (of the row)
center
- Center this element along the minor axis (of the row)
baseline
- Align with the baseline of the first line of the element
- Suitable for elements with different text sizes, not commonly used
ul{
display:flex;
align-items:flex-start;
}
li:nth-child(1){
align-self:stretch;
}
ul{
display:flex;
align-items:stretch;
}
li:nth-child(2){
align-self:flex-start;
}
ul{
display:flex;
align-items:stretch;
}
li:nth-child(3){
align-self:flex-end;
}
ul{
display:flex;
align-items:stretch;
}
li:nth-child(4){
align-self:center;
}
ul{
display:flex;
align-items:stretch;
}
li:nth-child(5){
align-self:baseline;
}
Attached
Learning video: The new version of the new Web front-end HTML5+CSS basic tutorial full version of Silicon Valley (131,133-134 episodes)