flex layout means flexible layout, with this layout float, clar and vertical-align will be invalid
.box{
display:flex;
}It is to control the position and arrangement of the child boxes by adding flex properties to the parent box. The big father is called "container" and the small box is called "item".
Common container properties:
1.flex-direction: Set the direction of the main axis
2.justify-content: Set the arrangement of child elements on the main axis
3.flex-wrap: Set whether the child element wraps
4.align-content: Set the arrangement of the child elements on the side axis (multiple lines)
4.align-items: Set the arrangement of the child elements on the side axis (single line)
5.flex-flow: composite property, equivalent to setting flex-direction and flex-wrap at the same time
The following is a detailed introduction to the container properties:
flex-direction : set the direction of the main axis
The default main axis direction is the horizontal direction - horizontal to the right (x axis)
Attribute value:
- row (default) horizontally from left to right
- row-reverse horizontal direction from right to left
<style> .all { display: flex; border: 1px solid red; width: 900px; height: 500px; flex-direction: row-reverse; } .box { width: 100px; height: 100px; background-color: aqua; border: 1px solid rebeccapurple; } </style> </head> <body> <div class="all"> <div class="box">1</div> <div class="box">2</div> </div> </body> - column vertical from top to bottom
<style> .all { display: flex; border: 1px solid red; width: 900px; height: 500px; flex-direction: column; } .box { width: 100px; height: 100px; background-color: aqua; border: 1px solid rebeccapurple; } </style> </head> <body> <div class="all"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> </div> </body> -
column-reverse bottom to top
.all { display: flex; border: 1px solid red; width: 900px; height: 500px; flex-direction: column-reverse; }
justify-content: Set the arrangement of child elements on the main axis
Note: Before using this property, be sure to determine which main axis is
- flex-start : start from the head by default, if the main axis is the X axis, from left to right
- flex-end: Arrange from the end
- center: Center alignment on the main axis (or horizontal if the main axis is the X axis)
- space-around: Divide the remaining space equally
- space-between: Welt both sides first to divide the remaining space equally (important)
flex-wrap: Set whether child elements wrap
No newline by default nowrap
1. nowrap will evenly divide the width of each child element and place it in the parent box
2. wrap Newline
align-items: Set the arrangement of child elements on the side axis (single line)
1.flex-start : The default value is from top to bottom
2.flex-end: from bottom to top
3.center: crowded together and centered (vertically centered)
4. stretch: stretch If the item has no height or is set to auto, it will occupy the height of the entire container
align-content: Set the arrangement of child elements on the side axis (multiple lines)
Note that there is no effect under a single line
1. The default value of flex-start starts at the head of the side axis
2.flex-end: start to arrange at the end of the side axis
3.center: display in the middle of the side axis
4.space-around: The child bisects the remaining space on the side axis
5.space-between: The sub-items are laid out at both ends on the side axis, and the remaining space is equally divided
6.stretch: Set the height of the child element to equal the height of the parent element
Compound property flex-flow
is a shorthand for the flex-direction and flex-wrap properties, the default value is row nowrap
.box {
flex-flow: <flex-direction> <flex-wrap>;
Common project properties:
Note: used on child elements (on items)
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order attribute: used to define the order of items, the smaller the number, the higher the front, the default value is 0
Can also be set to a negative number
<style>
.box1 {
width: 50px;
order: 3;
}
.box2 {
width: 100px;
order: 1;
}
.box3 {
width: 200px;
order: 2;
}
.box4 {
width: 150px;
order: 0;
}
</style>
</head>
<body>
<div class="all">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</div>
</body>The effect diagram is as follows:
The flex-grow property defines the magnification ratio of the item. The default is 0, that is, if there is remaining space, it will not be enlarged.
If the value of the item's flex-grow is set to 1, the item is equal to the remaining space
Case: 4 boxes are set The value of flex-grow of box2 is set to 2; then the space of box2 is larger than the other three boxes
[class*=box] {
/* width: 100px; */
height: 100px;
background-color: aqua;
border: 1px solid rebeccapurple;
margin: 5px;
flex-grow: 1;
}
.box2 {
flex-grow: 2;
}The effect is as follows:
The flex-shrink property defines the reduction ratio of the item, the default is 1, that is, if the space is insufficient, the item will be proportionally reduced.
flex-shrink setting negative value has no effect
Case: Set four boxes, the default value of box is 1, and the flex-shrink value of box2 is set to 0. When the space is insufficient, box2 will not shrink, and the rest of the boxes will shrink.
[class*=box] {
width: 200px;
height: 100px;
background-color: aqua;
border: 1px solid rebeccapurple;
margin: 5px;
flex-shrink: 1;
}
.box2 {
flex-shrink: 0;
}The effect is as follows:
The flex-basis property defines the main axis space occupied by the item before allocating excess space, that is, how much width the parent container occupies before allocating excess space,
Except for the flex-basic value that occupies the space of the parent container, it is classified into the remaining space
Note: If flex-basis and width are set at the same time, the width property will be overwritten, which means that flex-basis has higher priority than width. Also, if one of flex-basis and width is auto, the other non-auto property will have higher priority.
flex-basis and width are the auto value, then the final space is determined according to the amount of content, the more horizontal space occupied by the content.
The flex property is shorthand for flex-grow, flex-shrink and flex-basis, with a default value of 0 1 auto. (important)
The two properties flex-shrink and flex-basis are optional
The flex property has two shortcut values: auto (1 1 auto) and none (0 0 auto)
align-self property: allows a single item to override the value of align-items set in the parent container
The default is auto, inherits the align-items in the flex container If there is no parent container, it is equal to stretch
Except for auto In addition to auto, the other five values (stretch, flex-start, flex-end, center, and the baseline effect are consistent with align-items) are exactly the same as the align-items property.