Html 如何使用Flex box进行响应元素布局？_Html_Css_Layout_Responsive Design

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

html css layout responsive-design

Html 如何使用Flex box进行响应元素布局？,html,css,layout,responsive-design,Html,Css,Layout,Responsive Design,我有一个带有容器和两列的代码，一个有总大小的1/3，另一个有2/3。我使用flex属性将容器的宽度和中心元素的大小调整为1024倍，但我丢失了响应性布局我是否可以在flex box模型上安装一个宽度为1024倍且居中的容器，其中有两个子列，一个子列的总尺寸为1/3，另一个子列的总尺寸为2/3，并且仍然响应良好？我需要一些示例代码。我的代码是： <HEAD> <STYLE> body { displ

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

我是否可以在flex box模型上安装一个宽度为1024倍且居中的容器，其中有两个子列，一个子列的总尺寸为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；保证金：自动

谢谢各位