Summary of Flex layout properties
Flex layout parent container properties
Horizontal (on spindle) alignment:
The justify – content: flex – start | | flex – end center | space – between | space – around;
Alignment on the cross axis:
The align – items: flex – start | flex – end | center | baseline | stretch;
Project arrangement direction:
The flex – direction: row | row – reverse | column | column – reverse;
Line feed:
The flex – wrap: nowrap (not a newline) | wrap (down) | wrap – reverse (up);
Alignment of multiple axes:
The align – content: flex – start | flex – end | center | space – between | space – around | stretch;
Flex layout child element properties
Order attribute (num)
Order defines the order itself. The smaller the value is, the more advanced it is. The default value is 0. – 1/0/1/2/3 /…
Flex-grow property (num)
Flex-grow defines its own magnification ratio, which defaults to 0 and no magnification. For example: 1/2/1 = 25% : 50% : 25%
Flex-shrink attribute (NUM)
Flex-shrink defines the automatic shrink rate when space is insufficient. The default value is 1 and 0, respectively.
The flex – the basis properties
Flex-basis defines the minimum space, which defaults to auto, its natural size.
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.
The align – self properties
Align-self defines its own alignment, overriding the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch.
Flex compatibility
// Webkit-kernel browsers must be prefixed with -webkit..box{
display: -webkit-flex; /* Safari */
display: flex;
}
Copy the codeFrequently seen exam
Method 1: use align-self
<body>
<div class="father">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
</body>
</html>
<style>
.father{
width:600px;
height:600px;
border:1px solid black;
display:flex;
flex-direction: row;
}
.child1{
width:200px;
height: 200px;
background-color: black;
align-self: flex-start;
}
.child2{
width:200px;
height: 200px;
background-color: black;
align-self: center;
}
.child3{
width:200px;
height: 200px;
background-color: black;
align-self: flex-end;
}
</style>
Copy the codeMethod 2: Set the parent element
<body>
<div class="father">
<div class="father1">
<div class="child1">1</div>
</div>
<div class="father2">
<div class="child2">2</div>
</div>
<div class="father3">
<div class="child3">3</div>
</div>
</div>
</body>
</html>
<style>
.father{
width:600px;
height:600px;
border:1px solid black;
display:flex;
flex-wrap: wrap;
}
.father1{
width: 600px;
height: 200px;
display: flex;
justify-content: flex-start;
}
.father2{
width: 600px;
height: 200px;
display: flex;
justify-content: center;
}
.father3{
width: 600px;
height: 200px;
display: flex;
justify-content: flex-end;
}
.child1{
background: black;
width: 200px;
height: 200px;
}
.child2{
background: black;
width: 200px;
height: 200px;
}
.child3{
background: black;
width: 200px;
height: 200px;
}
</style>
Copy the code