如何使用 Flex-box 响应式元素布局？答案

【问题标题】：How to use Flex-box to responsive element layout?如何使用 Flex-box 响应式元素布局？
【发布时间】：2014-02-21 10:07:37
【问题描述】：

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

我能否在 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>

谢谢。

【问题讨论】：

标签： html css layout responsive-design

【解决方案1】：

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

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

谢谢大家。

【讨论】：