使用 flexbox 实现复杂的响应式设计

Question

我正在尝试为我的网页设计布局，但构建响应式设计有点复杂。

我已经使用媒体查询隐藏了侧边栏，但仍在为灵活顺序而苦苦挣扎。

在桌面上是这样的，我用flexbox实现了这个设计

但我在主板设备上尝试它应该看起来像这样

我应该如何添加媒体查询来重新排列项目。我是 flexbox 的新手。

<!DOCTYPE html>
<html lang="en">
<head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <style>
                    body{
                              width: 100%;
                              margin: 0;
                    }
                    .conatiner{
                              display: flex;
                    }
                    .sidebar{
                              max-width: 30%;
                              width: 100%;
                              height:  100vh;
                              background-color: blue;
                    }
                    .main{
                              max-width: 70%;
                              width: 100%;
                              background-color: black;
                    }
                    .wrapper{
                              display: flex;
                              flex-direction: column;

                    }
                    .wrapper-1{
                              display: flex;
                    }
                    .item-1{
                              background-color: blanchedalmond;
                              width: 70%;
                              height: 200px;
                              
                    }
                    .item-2{
                              background-color: chartreuse;
                              width: 30%;
                              height: 200px;
                    }
                    .item-3{
                              background-color: darkcyan;
                              width: 100%;
                              height: 300px;
                    }

                    
          </style>
</head>
<body>

          <div class="conatiner">
                    <div class="sidebar">
                              sidebar
                    </div>
                    <div class="main">

                              <div class="wrapper">
                                        <div class="wrapper-1">

                                                  <div class="item-1">
                                                            1
                                                  </div>
                                                  <div class="item-2">
                                                            2
                                                  </div>
                                        </div>
                                      
                                        <div class="item-3">
                                                  3
                                        </div>
                              </div>
                    </div>
          </div>
</body>
</html>

Answer 1

我修改了一些你的代码，它可能会解决你的问题

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            width: 100%;
            margin: 0;
        }

        .conatiner {
            display: flex;
            height: 100vh;
        }

        .sidebar {
            max-width: 30%;
            width: 100%;
            background-color: blue;
        }

        .main {
            max-width: 70%;
            width: 100%;
            background-color: black;

        }

        .wrapper {
            display: flex;
            flex-direction: column;

        }

        .wrapper-1 {
            display: flex;
            flex-wrap: wrap;
        }

        .item-1 {
            background-color: blanchedalmond;
            width: 70%;
            height: 200px;
            flex: 0 0 50%;
        }

        .item-2 {
            background-color: chartreuse;
            width: 30%;
            height: 200px;
            flex: 0 0 50%;
        }

        .item-3 {
            background-color: darkcyan;
            width: 100%;
            height: 300px;
            flex: 1;
        }

        @media only screen and (max-width: 480px) {
            .sidebar {
                display: none;
            }

            .wrapper-1 {
                flex-direction: column;
            }

            .item-1 {
                order: 1;
                flex: 0 0 200px;
            }

            .item-2 {
                order: 3;
                flex: 0 0 200px;
            }

            .item-3 {
                order: 2;
                flex: 0 0 300px;
            }

            .item-1, .item-2, .item-3 {
                width: 100%;
            }
        }
    </style>
</head>
<body>
<div class="conatiner">
    <div class="sidebar">
        sidebar
    </div>
    <div class="main">

        <div class="wrapper">
            <div class="wrapper-1">

                <div class="item-1">
                    1
                </div>
                <div class="item-2">
                    2
                </div>
                <div class="item-3">
                    3
                </div>

            </div>

        </div>
    </div>
</div>
</body>
</html>

使用 flexbox 实现复杂的响应式设计

complex responsive design achive using flexbox

html

css

flexbox

responsive-design