flex常见布局样式模型
横向布局：
1.两列式布局（含均分）：
**效果展示：
**
代码区：
<style>
.box{
width: 500px;
height: 500px;
display: flex;
background-color: whitesmoke;
margin: 0 auto;
}
.item1{
width: 200px;
height: 100px;
background-color: red;
}
.item2{
flex: 1;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="item1">part1</div>
<div class="item2">part2</div>
</div>
应用：考拉header布局
2.三栏式布局
效果展示：
代码区：
<style>
.box{
width: 500px;
height: 500px;
display: flex;
background-color: whitesmoke;
margin: 0 auto;
}
.item1{
width: 100px;
height: 50px;
background-color: red;
}
.item2{
width: 300px;
height: 50px;
background-color: blue;
}
.item3{
flex: 1;
height: 50px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="item1">left</div>
<div class="item2">center</div>
<div class="item3">right</div>
</div>
</body>
应用：
3.多栏式布局
效果展示：
代码区：
<style>
.box{
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 500px;
display: flex;
background-color: whitesmoke;
}
.item{
display: flex;
align-items: center;
justify-content: center;
width: 125px;
height: 40px;
background-color: red;
border: 1px solid #000;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
<div class="item">购物车</div>
<div class="item">我的</div>
<div class="item">客服</div>
<div class="item">反馈</div>
</div>
</body>
应用：
网页底部分页的固定页面制作(移动端常用)，网页布局...
纵向布局：
1.固定图标制作
展示效果：
代码区：
<style>
.box{
position: fixed;
top: 0;
bottom: 0;
right: 0;
margin: auto 0;
display: flex;
width: 60px;
height: 200px;
flex-direction: column;
background-color: whitesmoke;
}
.item{
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
background-color: red;
border: 1px solid #000;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
<div class="item">购物车</div>
<div class="item">我的</div>
<div class="item">客服</div>
<div class="item">反馈</div>
</div>
</body>
应用：
