mind Mapping
One: traditional layout and flex layout
Flex is the abbreviation of flexible Box, which means "flexible layout". It is used to provide maximum flexibility for the box model. Any container can be designated as a flex layout.
- When we set the flex layout for the parent box, the float, clear and vertical-align attributes of the child element will be invalid.
- Flexible layout = flexible layout = flexible box layout = flexible box layout = flex layout
- PC side: use traditional layout
- Mobile: Layout with flex
❦Add flex attributes to the parent box to control the position and arrangement of the child boxes
Two: common attributes of flex layout parent item
display: flex; open flex layout
2.1: flex-direction sets the direction of the main axis
The main axis and the side axis will change, depending on which flex-direction is set as the main axis, the rest is the side axis. And our sub-elements are arranged along the main axis, displayed in a row on the main axis
| Attributes | description |
|---|---|
| row | The default value is from left to right (X-axis direction) |
| row-reverse | Right to left |
| column | From top to bottom (Y axis direction) |
| column-reverse | From bottom to top |
2.2: justify-content sets the arrangement of child elements on the main axis
| Attributes | description |
|---|---|
| flex-start | The default value starts from the head, if the main axis is the x-axis, then from left to right |
| flex-end | Arrange from the end |
| center | Align in the center of the main axis (center horizontally if the main axis is the x-axis) |
| space-around | Divide the remaining space equally |
| space-between | Welt the two sides first and then divide the remaining space equally ((important) |
| space-evenly | equally distributed |
❀ 区别space-around，space-between，space-evenly
- space-around
/* 开启flex布局 */
display: flex;
/* space-around|平分剩余空间 */
justify-content: space-around;
- space-between
/* 开启flex布局 */
display: flex;
/* space-between|先两边贴边再平分剩余空间（(重要) */
justify-content: space-between;
- space-evenly
/* 开启flex布局 */
display: flex;
/* space-evenly|平均分配 */
justify-content: space-evenly;
2.3: flex-wrap sets whether the child element wraps
By default, items are arranged on a line (also known as "axis line"). The flex-wrap attribute is defined, and the flex layout does not wrap by default.
| Attributes | description |
|---|---|
| nowrap | Default value, no line break |
| wrap | Wrap |
2.4: align-items sets the arrangement of sub-elements on the side axis (single line)
This attribute is used to control the arrangement of the sub-items on the side axis (the default is the y-axis) when the sub-items are single (single row)
| Attributes | description |
|---|---|
| flex-start | Default value from top to bottom |
| flex-end | From bottom to top |
| center | Crowd together and centered (vertically centered) |
| stretch | Stretch |
2.5: align-content sets the arrangement of sub-elements on the side axis (multiple rows)
Set the arrangement of the sub-items on the cross axis and it can only be used when the sub-items are line-wrapped (multiple lines). It has no effect under a single line.
| Attributes | description |
|---|---|
| flex-start | The default value starts at the head of the cross shaft |
| flex-end | Start the arrangement at the end of the side shaft |
| center | Show in the middle of the side shaft |
| space-around | Children bisect the remaining space on the cross axis |
| space-between | The children are distributed at both ends on the lateral axis, and then the remaining space is divided equally |
| stretch | Set the height of the child element to bisect the height of the parent element |
❀ The difference between align-content and align-items
- align-items is suitable for single line, only top alignment, bottom alignment, centering and stretching
- align-content is suitable for line wrapping (multi-line) (invalid for single line), you can set the top alignment, bottom alignment, centering, stretching, and even distribution of remaining space and other attribute values.
- Find align-items in a single line Find align-content in multiple lines
2.6：flex-flow
The flex-flow property is a composite property of flex-direction and flex-wrap properties
Three: common attributes of flex layout items
3.1：flex
The flex attribute defines the remaining space allocated by the sub-item, and uses flex to indicate the number of copies.
flex: <number>;
[叽叽歪歪] After setting flex, the style of the sub-label indicating the main axis space will not work
3.2 align-self
The align-self attribute allows a single item to have a different alignment from other items and can override the align-items attribute.
The default value is auto, which means the align-items attribute of the parent element is inherited. If there is no parent element, it is equivalent to stretch.
3.3：order
Attributes define the order of items
Four: background linear gradient
background: linear-gradient(to bottom, red, pink);
【叽叽歪歪] There is no case, I can’t find it ☢
