|
变形移动
?
<!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; /*变形移动所有*/
}
div:active{ /*鼠标活动时 状态为鼠标点击但是没有松开时触发 相当于点击事件*/
/*transform: translateX(100px);*/ /*水平移动100px*/
/*transform: translate(50%); *//*百分比代表是自身宽度的一半 不是父盒子的宽度*/
/*transform: translate(50px);*/ /*点击之后x轴方向移动50px*/
transform: translate(50px ,50px); /*点击之后 x y 轴方向移动50px*/
/*transform: translateY(100px);*/ /*点击后y轴移动100px*/
}
</style>
</head>
<body>
<div>点击我试试看</div>
</body>
</html>
居中对齐
??
<!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); 水平移动100px*/
/*transform: translate(50%); 默认是X轴 水平移动自身宽度的一半*/
/*transform: translateY(50%); 在y轴移动自身高度的一半*/
/*定位移动*/
position: absolute;
left: 50%;
top: 50%;
/*margin-left: -100px;需要计算*/
transform: translate(-50%,-50%); /*右移上移自身的一半 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
transform:scale 图片缩放
??
<!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);*/ /*水平 垂直縮放 一个参数代表宽 高都同时缩放*/
transform: scale(1, 2); /*宽度不变，高度变2倍*/
}
section{
width: 632px;
height: 340px;
margin: 0 auto;
overflow: hidden; /*溢出隐藏*/
border: 1px solid green;
}
section img{
transform: all 0.2s; /*图片缩放 谁做动画，谁加过渡*/
}
section img:hover{
transform: scale(1.8); /*缩放*/
}
</style>
</head>
<body>
<div></div>
<section>
<img src="images/mi.jpg">
</section>
</body>
</html>
transform:rote 旋转
??
<!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; /*全部属性过渡 过渡时长 动画曲线 何时开始*/
/*border-radius: 50%;*/ /*圆角*/
border-radius: 100px;
border: 10px solid deeppink;
}
img:hover{
/*transform: rotate(-90deg);*/ /*deg度数*/
transform: rotate(720deg);
}
</style>
</head>
<body>
<img src="images/chu.jpg">
</body>
</html>
沿x轴旋转
?
<!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>
变换中心点旋转
??
<!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; /*添加所有属性过渡效果*/
transform-origin: 20px 30px; /*旋转中心点*/
}
img:hover{
transform: rotate(360deg); /*x轴旋转360度*/
}
</style>
</head>
<body>
<img src="images/pk1.png">
</body>
</html>
呈360旋转排列的图片
??
<!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; /*添加过渡属性*/
transform-origin: top right; /*旋转的中心点*/
}
div:hover img:first-child{ /*鼠标经过div 第一张图片旋转60°*/
transform: rotate(60deg); /*选装60°*/
}
div:hover img:nth-child(2){ /*鼠标经过div 第二张图片旋转60°*/
transform: rotate(120deg); /*选装60°*/
}
div:hover img:nth-child(3){
transform: rotate(180deg); /*选装60°*/
}
div:hover img:nth-child(4){
transform: rotate(240deg); /*选装60°*/
}
div:hover img:nth-child(5){
transform: rotate(300deg); /*选装60°*/
}
div:hover img:nth-child(6){
transform: rotate(360deg); /*选装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>
变形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; /*过渡属性*/
}
div:hover{
/*transform: skew(-30deg, 0);*/
transform: skew(30deg, 0);
}
</style>
</head>
<body>
<div>不经云清零天下会，荣登雄霸宝位</div>
</body>
</html>
rotateX旋转
?? ?
<!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: 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 视距
??
<!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: 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>
透视效果
??
<!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: 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移动 3D效果
??
<!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; /*添加过渡*/
}
div:hover{
/*transform: translateX(100px);*/
/*transform: translateY(100px);*/
transform: translateZ(300px); /*z控制物体与摄影机之间的距离 z越大 物体就越大 看似3D效果*/
}
</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; /*所有的属性过渡*/
margin: 100px auto;
/*transform: translate(-50%,-50%); */
transform: translate(-50%);
}
div:hover{/* 近大远小*/
transform: translate3d(100px, 100px, 300px); /*参数 x y z 其中x y可以是px 或者是% Z只能是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;
}
/*清除浮动*/
.clearfix::after{
content: ">";
display: block;
height: 0;
visibility: hidden;/* 隐藏盒子*/
clear: both; /*清除浮动*/
}
.clearfix{
*zoom: 1;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box"></div>
<h4>小米：让每一个人都能平等的享受科技带来的乐趣</h4>
</body>
</html>
开门大吉
?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>开门大吉</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; /*保证图片充满整个区域*/
perspective: 1000px; /*给父盒子添加透视效果 */
position: relative;
}
/*宽度缩放一半*//*添加过渡效果*/
.door-l,.door-r{
position: absolute;
top: 0;
width: 50%;
height: 100%;
background-color: green;
background: url(images/bg.png);
transition: all 1s;
}
/*左侧盒子按照左旋转*/
.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{ /*伪元素*/
content: "";
position: absolute; /*绝对定位*/
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;
}
/*当鼠标经过selection盒子时候 翻转rotateY*/
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>
两面翻转图片
?
<!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; /*子绝父相*/
transform-style: preserve-3d; /*保留当前位置 图片扁平滑*/
}
div img{
position: absolute;
top: 0;
left: 0;
transition: all 4s; /*添加过渡属性*/
}
div img:first-child{
z-index: 1;
backface-visibility: hidden; /*不是正面对着屏幕的就隐藏*/
}
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动画属性
?? ?@keyframes 规定动画
?? ?animation? 所用动画属性的简写
?? ?animation-name 动画名称
?? ?animation-duration 动画时长
?? ?animation-timing-function 动画运动曲线 默认ease
?? ?animation-delay 何时开始
?? ?animation-iteration-count 动画播放次数 默认1
?? ?animation-direction 是否在下一期逆向播放
?? ?animation-paly-state 正在运行或者暂停 默认 running
?? ?animation-fill-mode 规定动画时间外的状态
?? ?除了名字，动画时间 延时有严格顺序要求，其他随便
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;*/ /*动画名称go 运动时间2s 运动曲线ease 何时开始0s 播放次数2 [reverse 逆向 normal 正常+]*/
/*animation: go 2s ease 0s 2 ;*/ /*顺时针2次*/
/*animation: go 2s ease-in 0s infinite; *//*infinite 无线循环*/
animation: go 2s ease-in 0s infinite alternate; /*normal正常 alternate 正常-反方向 交替 alternate reverse 先反在正 交替 */
}
@keyframes go { /*定义动画 在x轴移动600px*/
from{
transform: translateX(0px);
}to{
transform: translateX(600px);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
多组动画
??
<!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: go 2s infinite; /*引用动画*/
}
@keyframes go { /*定义动画*/
0%{ /*等价于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%{ /*相当于to*/
transform: translate3d(0px, 0px, 0px);
}
/*动画结束之后返回原来的位置*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
奔跑吧汽车动画
??
<!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; /*引入动画*/
}
@keyframes car { /*定义动画*/
0%{
transform: translate3d(0px, 0px, 0px);
}
50%{
transform: translate3d(1000px, 0px, 0px);
}
51%{
transform: translate3d(1000px, 0px, 0px) rotateY(180deg); /*如果是多组变形 都属于transform 用空格隔开*/
}
99%{
transform: translate3d(0px, 0px, 0px) rotateY(180deg);
}
}
</style>
</head>
<body>
<img src="images/car.jpg" width="250">
</body>
</html>
横幅无线滚动效果
??
<!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 图片的宽度*展示图片的数量 前提是图片必须尺寸一致*/
height: 100px;
border: 1px solid pink;
margin: 100px auto;
overflow: hidden;
}
nav li{
float: left; /*浮动*/
}
nav ul{
width: 200%;
animation: moving 10s linear infinite;/*引用动画 无线循环 linear匀速*/
}
@keyframes moving { /*定义动画*/
form{
transform: translateX(0);
}
to{
transform: translateX(-1200px);
}
}
nav:hover ul{ /*鼠标经过ul就暂停动画*/
animation-play-state: paused; /*暂停动画*/
}
</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>
传统的三等分
??
<!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 伸缩布局
??
<!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; 伸缩布局模式 这个盒子就会拥有弹性 可弹性盒子
}
div{
height: 100%;
/*flex: 1; 表示每个盒子都占一份*/
}
div:first-child{
background-color: deeppink;
flex: 1; /*子盒子占分数为1*/
}
div:nth-child(2){
background-color: lawngreen;
flex: 2; /*子盒子占分数为1*/
}
div:last-child{
background-color: lightseagreen;
flex: 1; /*子盒子占分数为1*/
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
flex伸缩固定布局
?
<!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; /*伸缩布局模式*/
min-width: 500;/*最小宽度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;
}
/*说明：前面是固定的200px 后边两个盒子会平分剩余的宽度*/
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
伸缩布局排列方式
?
<!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; /*伸缩布局*/
min-width: 500px;
/*flex-direction: column;*/ /*排列方式是列*/
/*flex-direction: row;*/ /*排列方式是row*/
flex-direction: row-reverse; /*排列方式是反向row */
}
div:first-child{
background-color: deepskyblue;
flex: 1; /*分1份*/
}
div:nth-child(2){
background-color: rebeccapurple;
flex: 3; /*分3份*/
}
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 插入内容
?? ?flex-start 默认从父盒子开头
?? ?fled-end 项目位于父盒子结尾
?? ?center 项目位于容器中心
?? ?space-between 项目位于父盒子各行之间留有空白的容器内
?? ?space-around 项目位于各行之前、之后、之间都留有空白的容器
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; /*伸缩布局*/
/*justify-content: flex-start; 默认*/
/*justify-content: flex-end; 从父盒子右边添加*/
/*justify-content: center; 从父盒子中心添加*/
/*justify-content: space-between;*/ /*在父盒子宽度范围内平均空白的区域*/
justify-content: space-around; /*在各控件之前之间之后平局分配空白区域*/
}
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 调整测轴对齐
?? ?stretch 默认值 项目被拉伸以适应容器 前提子元素不要给高度
?? ?center 项目位于容器中心
?? ?flex-start 项目位于容器开头
?? ?flex-end 项目位于容器结尾
??
<!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; /*伸缩布局*/
justify-content: space-between;
/*align-items: flex-start; 默认上对齐*/
/*align-items: flex-end; 底部对齐*/
/*align-items: center; *//*垂直对齐*/
align-items: stretch; /*拉伸高*/
}
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控制是否换行
?? ?norwrap 不拆行 不拆列 压缩显示
?? ?wrap 必要时拆行拆列
?? ?wrap-reverse 相反顺序 必要时拆行拆列
??
<!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; /*伸缩模式*/
/*flex-wrap: nowrap; 默认 不换行 则压缩显示*/
/*flex-wrap: wrap; 必要时拆分*/
flex-wrap: wrap-reverse; /*反转*/
}
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 堆栈 [由flex-wrap产生的独立行对齐]
?? ?align-content针对flex容器多轴情况 align-item是针对一行情况排列
?? ?父元素必须设置display:flex 横向排列必须设置 flex-direction:row flex-wrap:wrap 属性才会起作用
?? ?stretch 默认值 项目被拉伸适应容器
?? ?center 项目位于容器中心
?? ?flex-start 项目位于容器开头
?? ?flex-end 项目位于容器结尾
?? ?space-between 项目位于各行之间的空白
?? ?space-around 项目位于各行之前 之间 之后都留有控件容器内
??
<!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; /*拉神模式*/
flex-flow: row wrap; /*必须设置这个属性 否则下边不起作用*/
/*align-content: center; 项目居中*/
/*align-content: flex-start; 位于父盒子开始排列*/
/*align-content: flex-end; 位于父盒子的底部*/
/*align-content: space-between; 垂直平分各行之前之后的空白容器区域*/
/*align-content: space-around; 垂直平分各行之前之间之后的空白区域*/
align-content: stretch; /*不要给子元素高度值*/
}
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>
order 排序 数值越小越靠前
??
<!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;
/*设置拉伸属性要给父类！！！*/
display: flex;
/*flex-wrap: wrap; 是否换行*/
/*justify-content: flex-start;*/
/*justify-content: flex-end;*/ /*从父盒子右边添加*/
/*justify-content: center;*/ /*从父盒子中心添加*/
/*justify-content: space-around;*/ /*在各控件之前之间之后平局分配空白区域*/
flex-wrap: wrap; /*必要时拆行拆列*/
align-items: center; /*垂直居中*//*调整测轴对齐 垂直居中*/
flex-direction: row;
align-content: center; /*对战*/
}
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>
|