这篇文章记录自己在实践flex的过程。需要有flex的基础知识。
1.居中布局
效果:
代码:
<!DOCTYPE html>
<!--lsx study flex 20190110-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,body{
width: 100%;
height: 100%;
background-color: beige;
margin: 0px;
padding: 0px;
}
.box{
display: flex;
width: 100%;
height: 100%;
background-color: aliceblue;
flex-direction: column;
}
.context{
height: 100%;
background-color: crimson;
display: flex;
justify-content: center;
align-items: center;
}
.bottom-info{
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
</head>
<body>
<div class="box">
<div class="context">
<div style="width: 200px;height: 200px;background-color: chartreuse;"></div>
</div>
<div class="bottom-info">
<div style="text-align: center;">corpright</div>
<div style="text-align: center;">2018C</div>
</div>
</div>
</body>
</html>
2.web后台典型布局,圣杯模型
效果图:
代码:
<!DOCTYPE html>
<!--lsx study flex 20190110-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,
body {
width: 100%;
height: 100%;
background-color: beige;
margin: 0px;
padding: 0px;
}
.box {
display: flex;
height: 100%;
flex-direction: column;
}
.head {
height: 60px;
background-color: aqua
}
.context {
height: 100%;
height: 100%;
background-color: #F0F8FF;
display: flex;
flex-direction: row;
overflow: hidden;
}
.buttom {
height: 50px;
background-color: #00FFFF
}
.left {
width: 80px;
background-color: #D2691E
}
.center {
width: 100%;
background-color: #DC143C;
overflow:auto;
}
.right {
width: 80px;
background-color: #D2691E
}
</style>
</head>
<body>
<div class="box">
<div class="head">头部</div>
<div class="context">
<div class="left">左部</div>
<div class="center">中部<img style="width: 2000px;height: 2000px;"/></div>
<div class="right">右部</div>
</div>
<div class="buttom">底部</div>
</div>
</body>
</html>
3.item布局
效果:
代码:
<!DOCTYPE html>
<!--lsx study flex 20190110-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.item{
display: flex;
height: 60px;
background-color: bisque;
margin-bottom: 10px;
}
.item-image{
width: 60px;
height: 60px;
/*固定布局*/
flex-basis: 60px;
}
.item-context{
background-color: aquamarine;
/*放大*/
flex-grow:1;
/*容器布局为flex*/
display: flex;
flex-direction: column;
}
.item-context-title{
flex-grow:0;
background-color: beige;
width: 200px;
}
.item-context-detail{
flex-grow:0;
background-color: chocolate;
height: 100%;
}
</style>
</head>
<body>
<div class="item">
<div class="item-image">
<img src="img/60x60.gif" />
</div>
<div class="item-context">
<div class="item-context-title">买一送一个的电视机</div>
<div class="item-context-detail">详情</div>
</div>
</div>
<div class="item">
<div class="item-image">
<img src="img/60x60.gif" />
</div>
<div class="item-context">
<div class="item-context-detail">详情</div>
<div class="item-context-title">买一送一个的电视机</div>
</div>
</div>
</body>
</html>