弹性布局(1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container{
width: 600px;
display: flex;/*父元素|容器设置flex*/
/*flex-direction: column;呈现列,row是行,默认为行*/
/*flex-direction: row-reverse;从右到左*/
/*flex-direction: column-reverse;从下到上*/
flex-direction: row;
/*justify-content: flex-end;x轴上水平对齐:居右*/
/*justify-content: center;居中*/
justify-content: space-around;/*平均分配*/
/*justify-content: space-between;两边贴边剩下空间平均分配*/
/*justify-content: flex-start;居左*/
flex-wrap: wrap;/*主轴方向上:自动换行*/
/*不换行则进行压缩盒子,并不按照尺寸来*/
/*按主轴线进行垂直,测轴/交叉轴*/
/*垂直对齐justify-content*/
/*换行flex-wrap:no-wrap.不换行*/
}
.container>div{
width: 200px;
height: 100px;
margin: 30px;
}
.container>div:nth-child(1){
background-color: red;
}
.container>div:nth-child(2){
background-color: green;
}
.container>div:nth-child(3){
background-color: #8A2BE2;
}
</style>
</head>
<body>
<div class="container">
<div>1hello</div>
<div>2world</div>
<div>3!</div>
</div>
</body>
</html>
代码运行结果:
弹性布局(2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>平行显示</title>
<style>
.box{
width: 250px;
height: 300px;
border: 1px solid;
display: flex;
flex-wrap: wrap;
}
.box>div{
width: 100px;
background-color: purple;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
代码的运行结果:
弹性布局(3)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>垂直显示</title>
<style>
.box{
width: 250px;
height: 300px;
border: 1px solid;
display: flex;
flex-direction: column;
/*flex-wrap: wrap;*/
}
.box>div{
width: 100px;
height: 100px;
background-color: purple;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
代码的运行结果:
Test——垂直
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 350px;
height: 300px;
border: 1px solid;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-content: space-around;
}
.box>div{
width: 100px;
height: 100px;
background-color: purple;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
代码的运行结果:
弹性子项属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*先写方向,在写换行*/
/*高度默认拉伸*/
.box{
width: 800px;
height: 300px;
border: 1px solid;
display: flex;
}
.box>div{
margin: 10px;
background-color: #DDA0DD;
flex: 1;
height: 100px;
}
.box>div:nth-child(3){
flex: 3;
align-self: flex-end;/*居中,不会串行*/
order: -1;/*值越大,排的越靠后,值越小,排的越靠前*/
}
/*在弹性盒模型里面,无论使用什么标签,最后样子都是一样的*/
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
代码的运行结果:
多行水平测轴
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>平行显示</title>
<style>
.box{
width: 350px;
height: 300px;
border: 1px solid;
display: flex;
justify-content: center;
/*align-items: stretch;*/
flex-wrap: wrap;
justify-content: flex-start;
/*align-items: center;中间空间步骤中间空间不受限制*/
align-content: space-between;
}
.box>div{
width: 100px;
height: 100px;
background-color: purple;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
代码的运行结果:
水平测轴对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>平行显示</title>
<style>
.box{
width: 350px;
height: 300px;
border: 1px solid;
display: flex;
justify-content: center;/*主轴对齐*/
/*align-items: center;测轴对齐,没有左右对齐*/
align-items: stretch;
}
.box>div{
width: 100px;
/*height: 100px;*/
background-color: purple;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
代码的运行结果:
对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 350px;
height: 300px;
border: 1px solid;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
align-content: space-around;
}
.box>div{
width: 100px;
height: 100px;
background-color: purple;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
代码的运行结果:
Test——京东页面布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
}
html,body{
width: 100%;
height: 100%;
}
.header{
width: 100%;
height: 10%;
background-color: black;
}
.pic{
width: 100%;
height: 25%;
background-color: yellow;
}
.piic{
width: 100%;
height: 20%;
border: 5px solid white;
background-color: plum;
}
.choose{
width: 100%;
height: 20%;
}
.cut{
width: 100%;
height: 50%;
}
.cut div{
width: 19.55%;
border: 2px solid white;
height: 100%;
float: left;
}
.cut div:nth-child(1){
background-color: #ADFF2F;
}
.cut div:nth-child(2){
background-color: aqua;
}
.cut div:nth-child(3){
background-color: blueviolet;
}
.cut div:nth-child(4){
background-color: blue;
}
.cut div:nth-child(5){
background-color: crimson;
}
.cut1{
width: 100%;
height: 50%;
}
.cut1 div{
width: 19.55%;
border: 2px solid white;
height: 100%;
float: left;
}
.cut1 div:nth-child(1){
background-color: aqua;
}
.cut1 div:nth-child(2){
background-color: #ADFF2F;
}
.cut1 div:nth-child(3){
background-color: blue;
}
.cut1 div:nth-child(4){
background-color: #DDA0DD;
}
.cut1 div:nth-child(5){
background-color: blueviolet;
}
.footer{
width: 100%;
height: 30%;
}
.p{
width: 48.9%;
height: 100%;
border: 5px solid white;
background-color: #DDA0DD;
float: left;
}
.pp{
width: 28.9%;
height: 100%;
border: 5px solid white;
background-color: #FFFF00;
float: left;
}
.ppp{
width: 18.9%;
height: 100%;
border: 5px solid white;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="pic"></div>
<div class="piic"></div>
<div class="choose">
<div class="cut">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="cut1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
<div class="footer">
<div class="p"></div>
<div class="pp"></div>
<div class="ppp"></div>
</div>
</body>
</html>
代码的运行结果:
——The End