html - 如何使用 Flex-box 进行响应式元素布局？

我有一个带有容器和 2 列的代码，其中一个占总大小的 1/3，另一个占 2/3。我使用 flex 属性将容器的宽度和中心元素调整为 1024 像素，但我失去了响应式布局。

我能否在 flex-box 模型上创建一个宽度为 1024 像素且居中、有 2 个子列、一个占总大小的 1/3 和另一个占总大小的 2/3 且仍然响应的容器？我需要一些示例代码。我的代码是:

<HEAD>
        <STYLE>
            body {
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;

                -webkit-flex-flow: column wrap;
            }

            header {
                order:1;
            }

            section{
                flex: 3 auto;
                order: 1;
            }

            aside {
                flex: 1 auto;
                order: 2;
            }
            footer{
                order: 3;
            }

            #main{
                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;

                order: 2;
                -webkit-flex-flow: row wrap;
            }

            #iSearch{
                width:100%;
            }
        </STYLE>
    </HEAD>
    <BODY>
        <header style="background-color:blue;">
            <input id="iSearch" type="search" placeholder="search" />
        </header>
        <div id="main">
            <section style="background-color:red;">
                ARTICLES
            </section>
            <aside style="background-color:green;">
            MENU LATERAL
            </aside>
        </div>
        <footer style="background-color:yellow;">
            copyright 2014
        </footer>
    </BODY>

谢谢。

最佳答案

我用容器样式的这段代码解决了这个问题:

最大宽度:1000px；边距:自动；

谢谢你们。

关于html - 如何使用 Flex-box 进行响应式元素布局？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21923551/