1. Flex container properties
The difference between each attribute:
It doesn't matter if you don't understand here, you read the following first, and then read this summary
1.1flex-direction
Arrangement attributes:
Change the arrangement direction of each element. There are four attributes as follows: row
| row-reverse |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.contain{
flex-direction: column;
height: 16rem;
background-color: antiquewhite;
border: 1px solid red;
display: flex;
}
.contain>.item{
background-color:aqua;
color: red;
border: solid royalblue;
width: 10em;
/* align-self: flex-end; */
}
</style>
</head>
<body>
<div class="contain">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
</body>
</html>
The main points are as follows:
When you useflex-direction: column;it,align-containit doesn't work, because at this time your horizontal axis and vertical axis have swapped positions
1.2justify-content
Arrange properties:
start,center,end,space-between,space-evenly,space-around
space-between: the distance between flex items is equal, aligned with main start and main end
space-evenly: the distance between flex items is equal, the distance between flex items and main start, main end is equal to that between flex items The distance between
space-around: the distance between flex items is equal, the distance between flex items and main start, main end is equal to half of the distance between flex items
Students can change the attribute value on line 74 to see what is the assignment of the attribute value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.contain{
justify-content: center;
height: 16rem;
background-color: antiquewhite;
border: 1px solid red;
display: flex;
}
.contain>.item{
background-color:aqua;
color: red;
border: solid royalblue;
width: 10em;
/* align-self: flex-end; */
}
</style>
</head>
<body>
<div class="contain">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
</body>
</html>
1.3align-items
Arrange properties:
normal, flex-start, flex-end, center, baseline
Note: align-items: a single layout on the vertical axis, that is, there can only be one element on the vertical axis (or multiple elements as a whole).
Students can change the attributes of 124 rows. Look at the changes in each attribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.contain{
flex-direction: column;
align-items: flex-end;
background-color: antiquewhite;
border: 1px solid red;
display: flex;
}
.contain .item{
background-color:aqua;
color: red;
border: solid royalblue;
}
</style>
</head>
<body>
<div class="contain">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
</div>
</body>
</html>
align-content (hardly used)
Arrange properties:
stretch,flex-start,flex-end,center,space-between,space-evenly,space-around
flex-wrap
Arrange properties:
wrap and nowrap