自适应三栏布局

小小前端程序猿

已于 2022-06-02 16:58:58 修改

阅读量215

点赞数

文章标签： css css3 html

于 2022-06-02 15:53:57 首次发布

本文链接：https://blog.csdn.net/weixin_45791692/article/details/125101618

版权

三栏布局下的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

小小前端程序猿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自适应三栏布局

在面试一个公司的时候有问到这样的一个问题实现两边固定中间自适应的布局?如果pc端的布局是三列形式的布局，如何在移动端实现三行形式的布局?当时并没有想出解决方法，主要还是自己的知识不牢固！！！在后面查阅资料后并代码演示后以此记录：
复制链接

扫一扫