Question

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

我可以在flex-box模型上有一个容器，宽度为1024px并且居中，有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>

感谢。

Answer 1

我在容器样式上使用此代码解决了问题：

最大宽度：1000像素; 余量：汽车;

谢谢你们。

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

1 个答案: