弹性布局-- 响应式布局 -- 伸缩布局
<!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>
section{
width: 80%;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
}
section div{
width: 33.33%;
height: 100%;
float: left;
}
section div:nth-child(1){
background-color: pink;
}
section div:nth-child(2){
background-color: rgb(192, 255, 221);
}
section div:nth-child(3){
background-color: rgb(42, 15, 221);
}
</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>
section{
width: 80%;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
/*1.父盒子加flex*/
display: flex;/*伸缩布局模式 这个盒子就会有弹性 弹性布局(弹性盒子)*/
}
section div{
height: 100%;
/*flex: 1; 等分的设置*/
}
section div:nth-child(1){
background-color: pink;
flex: 1;
}
section div:nth-child(2){
background-color: rgb(192, 255, 221);
margin: 0 5px;
flex: 2;
}
section div:nth-child(3){
background-color: rgb(42, 15, 221);
flex: 3;
}
/*这样就分成6分*/
</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>
section{
width: 80%;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
/*1.父盒子加flex*/
display: flex;/*伸缩布局模式 这个盒子就会有弹性 弹性布局(弹性盒子)*/
/*最小宽度*/
min-width:500px;
}
section div{
height: 100%;
/*flex: 1; 等分的设置*/
}
section div:nth-child(1){
background-color: pink;
width: 200px;
}
section div:nth-child(2){
background-color: rgb(192, 255, 221);
margin: 0 10px;
width: 100px;
}
section div:nth-child(3){
background-color: rgb(42, 15, 221);
flex: 1;
}
section div:nth-child(4){
background-color: rgb(221, 104, 15);
flex: 1;
}
/*这样就分成6分*/
</style>
</head>
<body>
<!-- 弹性布局-- 响应式布局 -- 伸缩布局 -->
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</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>
header{
width: 80%;
height: 300px;
margin: 100px auto;
display: flex;
/*background-color: pink;*/
min-width: 800px;
}
section:first-child{
height: 100%;
background-color: skyblue;
/*两侧固定*/
width: 200px;
}
section:nth-child(2){
height: 100%;
background-color: orange;
flex: 1;
margin: 0 10px;
}
section:last-child{
height: 100%;
background-color: red;
/*两侧固定*/
width: 200px;
}
</style>
</head>
<body>
<!--圣杯布局(双飞翼布局) 两侧固定，中间自适应(两侧是固定的，中间是自适应的)-->
<header>
<section>左侧</section>
<section>内容</section>
<section>右侧</section>
</header>
</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>
section{
width: 80%;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
display: flex;
min-width: 500px;
/*flex-direction: row;/*默认的是水平排列*/
/* flex-direction: column;/*可以设置垂直排列*/
/*flex-direction: row-reverse;/*使水平倒置*/
flex-direction: column-reverse;/*使垂直倒置*/
}
section div{
height: 100%;
flex: 1;
}
section div:first-child{
background-color: skyblue;
}
section div:nth-child(2){
background-color: orange;
}
section div:nth-child(3){
background-color: hotpink;
}
section div:last-child{
background-color: red;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</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>
section{
width: 80%;
height: 200px;
margin: 100px auto;
display: flex;
min-width: 500px;
flex-direction: row-reverse;
}
section div{
height: 100%;
}
section div:first-child{
background-color: skyblue;
width: 200px;
}
section div:nth-child(2){
background-color: orange;
width: 100px;
margin: 0 5px;
}
section div:nth-child(3){
background-color: hotpink;
flex: 1;
}
section div:last-child{
background-color: red;
flex: 1;
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</section>
</body>
</html>伸缩布局flex(justify-content)属性
/*justify-content: flex-start;/*让子盒子从父容器开头开始排列，默认就是*/
/*justify-content: flex-end;/*让子盒子从父容器结尾开始排列，盒子顺序不变*/
/*justify-content: center;/*让子盒子从父容器中间开始排列，盒子顺序不变*/
/*justify-content: space-between;/*左右贴近父盒子，中间的盒子分布空白缝隙*/
/*justify-content: space-around;/*等价于每个盒子都加了左右的margin外边距*/
justify-content: space-evenly;/*均匀排列每个元素，每个元素之间的距离相等*/
<!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>
section{
width: 1000px;
height: 300px;
border: 2px solid pink;
margin: 100px auto;
display: flex;
/*justify-content: flex-start;/*让子盒子从父容器开头开始排列，默认就是*/
/*justify-content: flex-end;/*让子盒子从父容器结尾开始排列，盒子顺序不变*/
/*justify-content: center;/*让子盒子从父容器中间开始排列，盒子顺序不变*/
/*justify-content: space-between;/*左右贴近父盒子，中间的盒子分布空白缝隙*/
/*justify-content: space-around;/*等价于每个盒子都加了左右的margin外边距*/
justify-content: space-evenly;/*均匀排列每个元素，每个元素之间的距离相等*/
}
section div{
width: 250px;
height: 100%;
}
section div:nth-child(1){
background-color: red;
}
section div:nth-child(2){
background-color: skyblue;
}
section div:nth-child(3){
background-color: pink;
}
</style>
</head>
<body>
<!--伸缩布局flex(justify-content)属性-->
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>弹性布局flex(align-items)属性
/*align-items: flex-start;/*上对齐，默认值*/
/*align-items: flex-end;/*下对齐*/
/*align-items: center;/*居中对齐*/
align-items: stretch;/*加了stertch 属性 里面的盒子跟父盒子一样的高度，等价于height:100%*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
section{
width: 1000px;
height: 300px;
border: 2px solid pink;
margin: 100px auto;
display: flex;
/*justify-content: flex-start;/*让子盒子从父容器开头开始排列，默认就是*/
/*justify-content: flex-end;/*让子盒子从父容器结尾开始排列，盒子顺序不变*/
/*justify-content: center;/*让子盒子从父容器中间开始排列，盒子顺序不变*/
/*justify-content: space-between;/*左右贴近父盒子，中间的盒子分布空白缝隙*/
/*justify-content: space-around;/*等价于每个盒子都加了左右的margin外边距*/
justify-content: space-evenly;/*均匀排列每个元素，每个元素之间的距离相等*/
/*align-items: flex-start;/*上对齐，默认值*/
/*align-items: flex-end;/*下对齐*/
/*align-items: center;/*居中对齐*/
align-items: stretch;/*加了stertch 属性 里面的盒子跟父盒子一样的高度，等价于height:100%*/
}
section div{
width: 250px;
height: 200px;
}
section div:nth-child(1){
background-color: red;
}
section div:nth-child(2){
background-color: skyblue;
}
section div:nth-child(3){
background-color: pink;
}
</style>
<body>
<!--弹性布局flex(align-items)属性-->
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>弹性布局flex(flex-wrap)属性
/*flex-wrap: nowrap;/*默认值，相当于强制在一行显示*/
flex-wrap: wrap;/*换行显示*/
/*flex-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>
section{
width: 1000px;
height: 600px;
border: 2px solid pink;
margin: 100px auto;
display: flex;
/*justify-content: flex-start;/*让子盒子从父容器开头开始排列，默认就是*/
/*justify-content: flex-end;/*让子盒子从父容器结尾开始排列，盒子顺序不变*/
/*justify-content: center;/*让子盒子从父容器中间开始排列，盒子顺序不变*/
/*justify-content: space-between;/*左右贴近父盒子，中间的盒子分布空白缝隙*/
/*justify-content: space-around;/*等价于每个盒子都加了左右的margin外边距*/
justify-content: space-evenly;/*均匀排列每个元素，每个元素之间的距离相等*/
/*align-items: flex-start;/*上对齐，默认值*/
/*align-items: flex-end;/*下对齐*/
/*align-items: center;/*居中对齐*/
/*align-items: stretch;/*加了stertch 属性 里面的盒子跟父盒子一样的高度，等价于height:100%*/
/*flex-wrap: nowrap;/*默认值，相当于强制在一行显示*/
flex-wrap: wrap;/*换行显示*/
/*flex-wrap: wrap-reverse;/*换行翻转*/
}
section div{
width: 250px;
height: 200px;
}
section div:nth-child(1){
background-color: red;
}
section div:nth-child(2){
background-color: skyblue;
}
section div:nth-child(3){
background-color: pink;
}
section div:nth-child(4){
background-color: purple;
}
section div:nth-child(5){
background-color: yellow;
}
</style>
</head>
<body>
<!--弹性布局flex(flex-wrap)属性-->
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
</body>
</html>弹性布局flex(align-content)多行垂直居中
/*flex-direction: row;
flex-wrap: wrap;*/
/*可以把上面两行代码优化*/
flex-flow: row wrap;
/*多行垂直居中*/
/*align-content: center;*/
align-content: space-evenly;/*平均分布空白缝隙*/
<!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>
section{
width: 1000px;
height: 600px;
border: 2px solid pink;
margin: 100px auto;
display: flex;
/*flex-direction: row;
flex-wrap: wrap;*/
/*可以把上面两行代码优化*/
flex-flow: row wrap;
/*多行垂直居中*/
/*align-content: center;*/
align-content: space-evenly;/*平均分布空白缝隙*/
}
section div{
width: 250px;
height: 200px;
}
section div:nth-child(1){
background-color: red;
}
section div:nth-child(2){
background-color: skyblue;
}
section div:nth-child(3){
background-color: pink;
}
section div:nth-child(4){
background-color: purple;
}
section div:nth-child(5){
background-color: yellow;
}
section div:nth-child(6){
background-color: yellowgreen;
}
section div:nth-child(7){
background-color: black;
}
</style>
</head>
<body>
<!--弹性布局flex(align-content)多行垂直居中-->
<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>弹性布局(order)属性
值越小越在前面,默认是0,可以是负数,注意没有单位
<!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>
section{
width: 1000px;
height: 600px;
border: 2px solid pink;
margin: 100px auto;
display: flex;
/*flex-direction: row;
flex-wrap: wrap;*/
/*可以把上面两行代码优化*/
flex-flow: row wrap;
/*多行垂直居中*/
/*align-content: center;*/
align-content: space-evenly;/*平均分布空白缝隙*/
}
section div{
width: 250px;
height: 200px;
}
section div:nth-child(1){
background-color: red;
}
section div:nth-child(2){
background-color: skyblue;
}
section div:nth-child(3){
background-color: pink;
order: 1;
}
section div:nth-child(4){
background-color: purple;
/*值越小越在前面,默认是0,可以是负数,注意没有单位*/
order: -1;
}
section div:nth-child(5){
background-color: yellow;
}
section div:nth-child(6){
background-color: yellowgreen;
}
section div:nth-child(7){
background-color: rgb(17, 184, 103);
}
</style>
</head>
<body>
<!--弹性布局(order)属性-->
<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>翻转案例
<!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>
body{
height: 1500px;
}
.father{
width: 300px;
height: 300px;
position: relative;
margin: 100px auto;
}
.one,.two{
width: 300px;
height: 300px;
border: 1px solid hotpink;
position: absolute;
left: 0;
top: 0;
background: url(images/1.jpg) no-repeat;
border-radius: 50%;
}
/*别忘了加层级*/
.one{
z-index: 1;
}
.one{
background: url(images/3.jpg) no-repeat;
transition: all 1s;
transform-origin: center bottom;
}
.father:hover .one{
transform: rotateX(180deg);
}
</style>
</head>
<body>
<div class="father">
<div class="one"></div>
<div class="two"></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>
body{
background-color: #ff6438;
}
.father{
width: 300px;
height: 300px;
margin: 100px auto;
position: relative;
}
.z,.f{
width: 300px;
height: 300px;
position: absolute;
left: 0;
top: 0;
background: url(images/baidu.png) no-repeat left bottom;
transition: all 0.5s;
/*隐藏旋转的div 元素的背面*/
backface-visibility: hidden;
}
.z{
z-index: 1;
}
.f{
background-position: -305px bottom;
transform: rotateY(-180deg);
}
.father:hover .z{
transform: rotateY(-180deg);
}
.father:hover .f{
transform: rotateY(0deg);
}
</style>
</head>
<body>
<!--
核心思想:
有定位,有过度,沿着Y轴旋转的
正面是从 0deg 到 -180deg 利用的就是 roateY 沿着Y轴旋转的
正面是从 -180deg 到 0deg 利用的就是 roateY 沿着Y轴旋转的
-->
<div class="father">
<div class="z"></div>
<div class="f"></div>
</div>
</body>
</html>