细节决定成败

最新推荐文章于 2022-08-12 17:06:25 发布

Vin1992

最新推荐文章于 2022-08-12 17:06:25 发布

阅读量484

点赞数

分类专栏： html+css 文章标签： flex 响应式布局

本文链接：https://blog.csdn.net/Vin1992/article/details/68257039

版权

html+css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

用flex 写一个简单的响应式多栏布局，自己写的和demo里写的一模一样，但是就是看不到想要的效果。
那一刻，我心里有一万只草泥马奔腾而过，开始严重怀疑自己的智商是否低级到照猫画猫的事情都做不了！
what the F**K！
憋住心里的复杂的心情，点了一支烟，默默抽完。
回来之后，继续复查，把所有代码删了重写再写了一遍，这次却意外成功了！我擦，看来世界上没有鬼！
最后，我把错误揪出来了，原因是：
@media all and空格() 媒体查询 and 和后面的条件括号中间的没有空格隔开。。。
没有隔开。。
没有隔开。。。

欲哭无泪
最后代码奉上：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
<style> 
    .flex-container {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
        text-align: center;
    }
    .flex-container > * {
        flex: 1 100%;
        padding: 10px;
    }
    .header {background-color:red; }
    .main {background-color: yellow;}
    .aside {background-color: blue;}
    .footer {background-color: orange;}

    @media all and (min-width: 600px) {
        .aside {
            flex: 1 auto;
        }
    }

    @media all and (min-width: 800px) {
        .main {
            flex: 3 0px;
            order: 2;
        }
        .aside1 {
            order: 1;
        }
        .aside2 {
            order: 3;
        }
        .footer {
            order: 4;
        }

    }
</style>
</head>
<body>

<div class="flex-container">
  <header class="header">头部</header>
  <article class="main">
    <p>菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。</p>
  </article>
  <aside class="aside aside1">边栏 1</aside>
  <aside class="aside aside2">边栏 2</aside>
  <footer class="footer">底部</footer>
</div>

</body>
</html>

Vin1992

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
细节决定成败

用flex 写一个简单的响应式多栏布局，自己写的和demo里写的一模一样，但是就是看不到想要的效果。那一刻，我心里有一万只草泥马奔腾而过，开始严重怀疑自己的智商是否低级到照猫画猫的事情都做不了！ what the F**K！憋住心里的复杂的心情，点了一支烟，默默抽完。回来之后，继续复查，把所有代码删了重写再写了一遍，这次却意外成功了！我擦，看来世界上没有鬼！最后，我把错误揪出来了，
复制链接

扫一扫

专栏目录