1. Principle of flex layout
2. Common attributes of flex layout parent item
Common parent attributes :
1) flex-direction sets the direction of the main axis
Main shaft and side shaft :
2) justify-content sets the arrangement of sub-elements on the main axis
3) Whether the flex-wrap child element wraps
4) align-items sets the arrangement of sub-elements on the side axis (single line)
5) align-content sets the arrangement of sub-elements on the side axis (multiple rows)
The difference between align-content and align-items :
6）flex-flow
7) Summary
3. Common attributes of flex layout sub-items
1) Number of copies occupied by flex sub-items
Case :
<html>
<head>
<style>
section {
display: flex;
width: 60%;
height: 150px;
margin: 0 auto;
}
section div:nth-child(1) {
width: 100px;
height: 150px;
background-color: red;
}
section div:nth-child(2) {
flex: 1;
background: green;
}
section div:nth-child(3) {
width: 100px;
height: 150px;
background-color: blue;
}
p {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 100px auto;
}
p span {
flex: 1;
}
p span:nth-child(2) {
flex: 2;
background-color: purple;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
</body>
</html>
2) align-self controls the arrangement of the children themselves on the lateral axis
3) The order attribute defines the order of the sub-items (before and after the order)
Learning materials :
https://www.bilibili.com/video/BV1N54y1i7dG?p=3