Deformation movement
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: hotpink;
transition: all 0.5s; /*Deform move all*/
}
div:active{ /*When the mouse is active, the status is mouse click but not released, which is equivalent to a click event*/
/*transform: translateX(100px);*/ /*Horizontal movement 100px*/
/*transform: translate(50%); *//*The percentage represents half of its own width, not the width of the parent box*/
/*transform: translate(50px);*/ /*After clicking, move 50px in the x-axis direction*/
transform: translate(50px ,50px); /*After clicking, move 50px in the direction of X and Y axis*/
/*transform: translateY(100px);*/ /*After clicking, the y-axis moves 100px*/
}
</style>
</head>
<body>
<div>Click me to try</div>
</body>
</html>Center alignment
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: deeppink;
/*transform: translate(100px); Horizontal movement 100px*/
/*transform: translate(50%); The default is to move the X axis horizontally by half its width*/
/*transform: translateY(50%); Move half its height on the y-axis*/
/*Positioning movement*/
position: absolute;
left: 50%;
top: 50%;
/*margin-left: -100px;Need calculation*/
transform: translate(-50%,-50%); /*Move right and move up half of yourself */
}
</style>
</head>
<body>
<div></div>
</body>
</html>transform:scale image scaling
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: hotpink;
margin: 100px auto;
}
div:active{
/*transform: scale(2);*/ /*Scale horizontally and vertically a parameter represents that both width and height are scaled at the same time*/
transform: scale(1, 2); /*The width remains unchanged and the height becomes twice*/
}
section{
width: 632px;
height: 340px;
margin: 0 auto;
overflow: hidden; /*Overflow hiding*/
border: 1px solid green;
}
section img{
transform: all 0.2s; /*Who does the animation and who adds the transition*/
}
section img:hover{
transform: scale(1.8); /*zoom*/
}
</style>
</head>
<body>
<div></div>
<section>
<img src="images/mi.jpg">
</section>
</body>
</html>Transform: rot rotation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
img{
margin: 100px;
transition: all 3s ease-in 1s; /*When does the all attribute transition duration animation curve begin*/
/*border-radius: 50%;*/ /*fillet*/
border-radius: 100px;
border: 10px solid deeppink;
}
img:hover{
/*transform: rotate(-90deg);*/ /*deg degrees*/
transform: rotate(720deg);
}
</style>
</head>
<body>
<img src="images/chu.jpg">
</body>
</html>Rotate along the x axis
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
img{
margin: 100px;
transition: all 1s ease-in 0.2s;
}
/*img:active{*/
.one:hover{
transform: rotateX(360deg);
}
.two:hover{
transform: rotateY(360deg);
}
.three:active{
transform: rotateZ(180deg);
}
.four:active{
transform: rotateX(45dep) rotateY(180deg) rotateZ(90deg) skew(0,10deg);
}
</style>
</head>
<body>
<img class="one" src="images/3.jpg">
<img class="two" src="images/4.jpg">
<img class="three" src="images/5.jpg">
<img class="four" src="images/6.jpg">
</body>
</html>Transform center point rotation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
img{
margin: 200px;
transition: all 0.6s; /*Add all attribute transition effects*/
transform-origin: 20px 30px; /*Rotation center point*/
}
img:hover{
transform: rotate(360deg); /*x Rotate the shaft 360 degrees*/
}
</style>
</head>
<body>
<img src="images/pk1.png">
</body>
</html>Pictures arranged in 360 rotation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
width: 250px;
height: 170px;
border: 1px solid deeppink;
margin: 400px auto;
position: relative;
}
div img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.6s; /*Add transition properties*/
transform-origin: top right; /*Center point of rotation*/
}
div:hover img:first-child{ /*Rotate the mouse through the div first picture by 60 °*/
transform: rotate(60deg); /*Optional 60 °*/
}
div:hover img:nth-child(2){ /*The mouse rotates 60 ° through the div second picture*/
transform: rotate(120deg); /*Optional 60 °*/
}
div:hover img:nth-child(3){
transform: rotate(180deg); /*Optional 60 °*/
}
div:hover img:nth-child(4){
transform: rotate(240deg); /*Optional 60 °*/
}
div:hover img:nth-child(5){
transform: rotate(300deg); /*Optional 60 °*/
}
div:hover img:nth-child(6){
transform: rotate(360deg); /*Optional 60 °*/
}
</style>
</head>
<body>
<div>
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
<img src="images/4.jpg" alt="">
<img src="images/5.jpg" alt="">
<img src="images/6.jpg" alt="">
</div>
</body>
</html>Deformation skew
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
font-size: 50px;
font-weight: 700;
margin: 100px;
transition: all 0.7s; /*Transition properties*/
}
div:hover{
/*transform: skew(-30deg, 0);*/
transform: skew(30deg, 0);
}
</style>
</head>
<body>
<div>Without cloud clearing, the world will ascend to the throne of hegemony</div>
</body>
</html>rotateX rotation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*Sight distance the distance between the camera and the screen is not obvious. The larger the sight distance, the more obvious the effect is*/
body{
perspective: 1000px;
}
img{
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover{
transform: rotateX(360deg);
}
</style>
</head>
<body>
<img src="images/pk1.png">
</body>
</html>perspective sight distance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*Sight distance the distance between the camera and the screen is not obvious the larger the sight distance is, the smaller the sight distance is, the more obvious the effect is*/
body{
perspective: 1000px;
}
img{
display: block;
margin: 100px auto;
transition: all 1s;
}
img:first-child:hover {
transform: rotateX(360deg);
}
img:nth-child(2):hover {
transform: rotateY(360deg);
}
img:nth-child(3):hover{
transform: rotateZ(360deg);
}
img:last-child:hover{
transform: skew(30deg);
}
</style>
</head>
<body>
<img src="images/pk1.png">
<img src="images/pk1.png">
<img src="images/pk1.png">
<img src="images/pk1.png">
</body>
</html>Perspective effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*Sight distance the distance between the camera and the screen is not obvious the larger the sight distance is, the smaller the sight distance is, the more obvious the effect is*/
body{
perspective: 1000px;
}
img{
display: block;
margin: 100px auto;
transition: all 1s;
}
img:first-child:hover {
transform: rotateX(360deg);
}
img:nth-child(2):hover {
transform: rotateY(360deg);
}
img:nth-child(3):hover{
transform: rotateZ(360deg);
}
img:last-child:hover{
transform: skew(30deg);
}
</style>
</head>
<body>
<img src="images/pk1.png">
<img src="images/pk1.png">
<img src="images/pk1.png">
<img src="images/pk1.png">
</body>
</html>translateZ move 3D effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
body{
perspective: 600px;
}
div{
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 1s; /*Add transition*/
}
div:hover{
/*transform: translateX(100px);*/
/*transform: translateY(100px);*/
transform: translateZ(300px); /*z The larger the distance z between the control object and the camera, the larger the object looks like a 3D effect*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
translate3d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
body{
perspective: 700px;
}
div.box1{
width: 200px;
height: 200px;
background-color: deeppink;
transition: all 0.7s; /*All attribute transitions*/
margin: 100px auto;
/*transform: translate(-50%,-50%); */
transform: translate(-50%);
}
div:hover{/* Near big far small*/
transform: translate3d(100px, 100px, 300px); /*Parameter x y z where x y can be px or% Z can only be px*/
}
h4{
transform: translate3d(0px, 50px, 0px);
transition: all 0.6s;
}
h4:hover{
transform: translate3d(0px, 0px, 0px);
}
.box{
height: 1px;
width: 100%;
background-color: red;
margin: 0;
}
/*Clear float*/
.clearfix::after{
content: ">";
display: block;
height: 0;
visibility: hidden;/* Hidden box*/
clear: both; /*Clear float*/
}
.clearfix{
*zoom: 1;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box"></div>
<h4>Xiaomi: let everyone enjoy the fun brought by technology equally</h4>
</body>
</html>Open the door
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Open the door</title>
<style type="text/css">
body{
background-color: green;
}
section{
width: 450px;
height: 300px;
margin: 100px auto;
border: 1px solid #000;
background: url(images/chu.jpg) no-repeat;
background-size: cover; /*Make sure the picture fills the entire area*/
perspective: 1000px; /*Add perspective to parent box */
position: relative;
}
/*Scale width by half*//*Add transition effect*/
.door-l,.door-r{
position: absolute;
top: 0;
width: 50%;
height: 100%;
background-color: green;
background: url(images/bg.png);
transition: all 1s;
}
/*The left box rotates to the left*/
.door-l{
left: 0;
border: 1px solid #000;
transform-origin: left;
}
.door-r{
right: 0;
border: 1px solid #000;
transform-origin: right;
}
.door-l::before,.door-r::before{ /*Pseudo element*/
content: "";
position: absolute; /*Absolute positioning*/
top: 50%;
width: 20px;
height: 20px;
border: 1px solid #000;
border-radius: 50%;
transform: translateY(-50%);
}
.door-l::before{
right: 15px;
}
.door-r::before{
left: 15px;
}
/*Flip rotateY when the mouse passes the selection box*/
section:hover .door-l{
transform: rotateY(-130deg);
}
section:hover .door-r{
transform: rotateY(130deg);
}
</style>
</head>
<body>
<section>
<div class="door-l"></div>
<div class="door-r"></div>
</section>
</body>
</html>Flip picture on both sides
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
width: 224px;
height: 224px;
margin: 100px auto;
position: relative; /*Son Jue father phase*/
transform-style: preserve-3d; /*Keep current position picture flat*/
}
div img{
position: absolute;
top: 0;
left: 0;
transition: all 4s; /*Add transition properties*/
}
div img:first-child{
z-index: 1;
backface-visibility: hidden; /*It's not hidden facing the screen*/
}
div:hover img{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div><img src="images/qian.svg" alt=""><img src="images/hou.svg" alt=""></div>
</body>
</html>CSS3 animation properties
@ keyframes specifies the animation
animation attribute abbreviation
Animation name animation name
Animation duration
Animation timing function animation motion curve default ease
When does the animation delay start
Animation iteration count the number of animation playback times is 1 by default
Will the animation direction be played backwards in the next issue
Animation pay state is running or pausing the default running
Animation fill mode specifies the state outside the animation time
In addition to the name, the animation time delay has strict sequence requirements, and others are optional
animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: deeppink;
/*animation: go 2s ease 0s 2 reverse;*/ /*Animation name go motion time 2s motion curve ease when to start 0s playback times 2 [reverse normal +]*/
/*animation: go 2s ease 0s 2 ;*/ /*Clockwise 2 times*/
/*animation: go 2s ease-in 0s infinite; *//*infinite Wireless loop*/
animation: go 2s ease-in 0s infinite alternate; /*normal Normal alternate normal reverse alternate reverse */
}
@keyframes go { /*Defines that the animation moves 600px on the x axis*/
from{
transform: translateX(0px);
}to{
transform: translateX(600px);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Multi group animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: deeppink;
/*animation: go 2s ease 0s infinite alternate;*/ /*Animation name animation duration: when does the motion curve start to alternate forward and backward in the wireless cycle*/
animation: go 2s infinite; /*Reference animation*/
}
@keyframes go { /*Define animation*/
0%{ /*Equivalent to from*/
transform: translate3d(0px, 0px, 0px);
}
25%{
transform: translate3d(800px, 0px, 0px);
}
50%{
transform: translate3d(800px, 400px, 0px);
}
75%{
transform: translate3d(0px, 400px, 0px);
}
100%{ /*Equivalent to to*/
transform: translate3d(0px, 0px, 0px);
}
/*Return to the original position after the animation*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>Run car animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
img{
animation: car 5s infinite; /*Introduce animation*/
}
@keyframes car { /*Define animation*/
0%{
transform: translate3d(0px, 0px, 0px);
}
50%{
transform: translate3d(1000px, 0px, 0px);
}
51%{
transform: translate3d(1000px, 0px, 0px) rotateY(180deg); /*If multiple sets of deformations belong to transform, separate them with spaces*/
}
99%{
transform: translate3d(0px, 0px, 0px) rotateY(180deg);
}
}
</style>
</head>
<body>
<img src="images/car.jpg" width="250">
</body>
</html>Banner wireless scrolling effect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
nav{
width: 1200px; /*200*6=1200 The width of the picture * shows the number of pictures, provided that the pictures must be consistent in size*/
height: 100px;
border: 1px solid pink;
margin: 100px auto;
overflow: hidden;
}
nav li{
float: left; /*float*/
}
nav ul{
width: 200%;
animation: moving 10s linear infinite;/*Reference animation wireless loop linear constant speed*/
}
@keyframes moving { /*Define animation*/
form{
transform: translateX(0);
}
to{
transform: translateX(-1200px);
}
}
nav:hover ul{ /*Pause the animation when the mouse passes ul*/
animation-play-state: paused; /*Pause animation*/
}
</style>
</head>
<body>
<nav>
<ul>
<li><img src="images/1.jpg" width="200" height="100"></li>
<li><img src="images/2.jpg" width="200" height="100"></li>
<li><img src="images/3.jpg" width="200" height="100"></li>
<li><img src="images/4.jpg" width="200" height="100"></li>
<li><img src="images/5.jpg" width="200" height="100"></li>
<li><img src="images/6.jpg" width="200" height="100"></li>
<li><img src="images/1.jpg" width="200" height="100"></li>
<li><img src="images/2.jpg" width="200" height="100"></li>
<li><img src="images/3.jpg" width="200" height="100"></li>
<li><img src="images/4.jpg" width="200" height="100"></li>
<li><img src="images/5.jpg" width="200" height="100"></li>
<li><img src="images/6.jpg" width="200" height="100"></li>
</ul>
</nav>
</body>
</html>Traditional trisection
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
section{
width: 80%;
height: 200px;
border: 1px solid green;
margin: 100px auto;
}
section div{
width: 33.33%;
height: 100%;
float: left;
}
section div:nth-child(1){
background-color: green;
}
section div:nth-child(2){
background-color: orange;
}
section div:nth-child(3){
background-color: deepskyblue;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>Flex flex flex layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/* *{
margin: 0;
padding: 0;
}*/
section{
width: 80%;
height: 200px;
border: 1px solid greenyellow;
margin: 100px auto;
display: flex; In the scalable layout mode, the box will have an elastic and elastic box
}
div{
height: 100%;
/*flex: 1; It means that each box has one share*/
}
div:first-child{
background-color: deeppink;
flex: 1; /*The sub box has a score of 1*/
}
div:nth-child(2){
background-color: lawngreen;
flex: 2; /*The sub box has a score of 1*/
}
div:last-child{
background-color: lightseagreen;
flex: 1; /*The sub box has a score of 1*/
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>flex telescopic fixed layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
section{
width: 80%;
height: 200px;
border: 1px solid #ccc;
display: flex; /*Scalable layout mode*/
min-width: 500;/*Minimum width 500px*/
}
section div{
height: 100%;
}
section div:first-child{
background-color: green;
width: 200px;
}
section div:nth-child(2){
background-color: pink;
flex: 1;
}
section div:last-child{
background-color: deeppink;
flex: 1;
}
/*Note: the front is fixed 200px, and the two boxes at the back will divide the remaining width equally*/
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>Telescopic layout arrangement
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
section{
width: 80%;
height: 200px;
border: 1px solid rebeccapurple;
display: flex; /*Telescopic layout*/
min-width: 500px;
/*flex-direction: column;*/ /*Arranged in columns*/
/*flex-direction: row;*/ /*The arrangement is row*/
flex-direction: row-reverse; /*The arrangement is reverse row */
}
div:first-child{
background-color: deepskyblue;
flex: 1; /*1 share*/
}
div:nth-child(2){
background-color: rebeccapurple;
flex: 3; /*3 copies*/
}
div:nth-child(3){
background-color: green;
flex: 1;
}
div:last-child{
background-color: hotpink;
/*height: 500px;*/
width: 100px;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</section>
</body>
</html>Justify content insert content
Flex start starts from the parent box by default
The Fred end item is at the end of the parent box
The center project is located in the center of the container
The space between item is located in a container with a blank space between the rows of the parent box
The space around item is located before, after and between each line, with a blank container
justify-content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
section{
width: 1000px;
height: 250px;
border: 1px solid orange;
display: flex; /*Telescopic layout*/
/*justify-content: flex-start; default*/
/*justify-content: flex-end; Add from the right side of the parent box*/
/*justify-content: center; Add from parent box center*/
/*justify-content: space-between;*/ /*An area that averages white space within the width of the parent box*/
justify-content: space-around; /*Assign a blank area before and after each control in a draw*/
}
div{
width: 200px;
height: 250px;
}
div:first-child{
background-color: deeppink;
width: 400px;
}
div:nth-child(2){
background-color: green;
}
div:last-child{
background-color: yellowgreen;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>Align items adjust the axis alignment
stretch default: the item is stretched to fit the container. Don't give the child element a height
The center project is located in the center of the container
The flex start item is at the beginning of the container
The flex end item is at the end of the container
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
section{
width: 1000px;
height: 500px;
border: 1px solid green;
display: flex; /*Telescopic layout*/
justify-content: space-between;
/*align-items: flex-start; Default top alignment*/
/*align-items: flex-end; Align Bottom */
/*align-items: center; *//*Vertical alignment*/
align-items: stretch; /*Stretch height*/
}
section div{
width: 200px;
/*height: 100px;*/
}
div:first-child{
background-color: greenyellow;
}
div:nth-child(2){
background-color: orange;
}
div:last-child{
background-color: powderblue;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>Flex wrap controls whether to wrap lines
norwrap compress display without splitting rows and columns
wrap split rows and columns if necessary
Wrap reverse reverse order: split rows and columns if necessary
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
section{
width: 1000px;
height: 1000px;
border: 1px solid green;
display: flex; /*Telescopic mode*/
/*flex-wrap: nowrap; Compressed display without line break by default*/
/*flex-wrap: wrap; Split if necessary*/
flex-wrap: wrap-reverse; /*reversal*/
}
div{
width: 250px;
height: 200px;
}
div:first-child{
background-color: green;
}
div:nth-child(2){
background-color: orange;
}
div:nth-child(3){
background-color: darkorange;
}
div:nth-child(4){
background-color: limegreen;
}
div:nth-child(5){
background-color: pink;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
</body>
</html>Align content stack [separate line alignment generated by flex wrap]
Align content is for multi axis cases of flex containers, and align item is for one row
The parent element must have the display:flex horizontal arrangement set. The flex direction: row flex Wrap: wrap attribute must be set to work
stretch default the item is stretched to fit the container
The center project is located in the center of the container
The flex start item is at the beginning of the container
The flex end item is at the end of the container
The space between item is a blank space between lines
The space around item is located in the control container before and after each line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
section{
width: 1000px;
height: 800px;
border: 1px solid purple;
display: flex; /*Pull God Mode*/
flex-flow: row wrap; /*This property must be set, otherwise the lower edge will not work*/
/*align-content: center; Project Center*/
/*align-content: flex-start; Arranged at the beginning of the parent box*/
/*align-content: flex-end; At the bottom of the parent box*/
/*align-content: space-between; The empty container area before and after each row is vertically bisected*/
/*align-content: space-around; The blank area before and after each line is vertically bisected*/
align-content: stretch; /*Do not give height values to child elements*/
}
div{
width:248px;
/*height: 200px;*/
border: 1px solid greenyellow;
background-color: #00A477;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</section>
</body>
</html>The smaller the order sorting value, the higher it is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
section{
width: 1000px;
height: 600px;
border: 1px solid green;
/*Set stretch attribute to parent class!!!*/
display: flex;
/*flex-wrap: wrap; Wrap*/
/*justify-content: flex-start;*/
/*justify-content: flex-end;*/ /*Add from the right side of the parent box*/
/*justify-content: center;*/ /*Add from parent box center*/
/*justify-content: space-around;*/ /*Assign a blank area before and after each control*/
flex-wrap: wrap; /*Split rows and columns if necessary*/
align-items: center; /*Vertical center*//*Adjust the axis alignment and center vertically*/
flex-direction: row;
align-content: center; /*Battle*/
}
div{
width: 248px;
height: 200px;
border: 1px solid darkred;
background-color: seagreen;
}
div:nth-child(7){
background-color: pink;
order: -1;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</section>
</body>
</html>