Flex-box를 사용하여 반응 형 요소 레이아웃을 사용하는 방법은 무엇입니까?

나는 컨테이너와 2 개의 열이있는 코드를 가지고있다. 하나는 전체 크기의 1/3이고 다른 것은 2/3이다. flex 속성을 사용하여 1024px 너비와 가운데 요소로 컨테이너의 크기를 조정하지만 응답 성이 떨어집니다.Flex-box를 사용하여 반응 형 요소 레이아웃을 사용하는 방법은 무엇입니까?

플렉스 박스 모델의 너비가 1024Xx이고 중심에 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>

감사합니다.

출처

2014-02-21 Jean Toledo

내가 용기 스타일에이 코드를 사용하여 문제를 해결 :

최대 폭 : 1000px; 여백 : 자동;

감사합니다.

출처

2014-02-21 02:07:37

Flex-box를 사용하여 반응 형 요소 레이아웃을 사용하는 방법은 무엇입니까?

답변

관련 문제