三栏布局下的pc端和移动端怎么实现三列变三行
在面试一个公司的时候有问到这样的一个问题
实现两边固定 中间自适应的布局?
如果pc端的布局是三列形式的布局,如何在移动端实现三行形式的布局?
当时并没有想出解决方法,主要还是自己的知识不牢固!!!
在后面查阅资料后并代码演示后以此记录:
自适应三栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="left">左</div>
<div class="center">中</div>
<div class="right">右</div>
</div>
</body>
<style>
@media only screen and (max-width:500px) {
.container{
flex-direction: column
}
.left{
flex:1 !important
}
}
*{
padding: 0;
margin: 0;
height: 100%;
}
.container{
display: flex;
}
.left {
flex: 0 0 200px;
background-color: aqua;
}
.right {
flex: 0 0 200px;
background-color: rosybrown;
}
.center {
flex:1;
background-color: burlywood;
}
</style>
</html>
PC端下
PC端下 浏览器宽度小于等于500
移动端下 浏览器宽度小于等于500
实现原理
- 通过flex布局实现pc端自适应的布局
- 左右两边的item通过flex:0 0 200px来实现左右两盒子的固定.
- 通过媒体查询来监听浏览器的宽度
- 监听到宽度小于等于500时,将容器的主轴改为垂直,即为flex-direction:column