열과 행 레이아웃으로 Flexbox 적용

Question

여러분이 도움을 줄 수 있는지 궁금합니다. 나는 앉아서 처음부터 웹 사이트를 만든 이후로 몇 년이 지났으며 나는 단지 무언가를하고 싶다. . 나는 과거에 중단 점을 알고 있었지만 Flexbox가이를 수행 할 수있는 대안이 될 수 있습니다 (?). 나는 아직 그것에 대해 머리를 쓰지 않고 있으며, 그것을 코드에 적용하는 것이 약간 까다 롭다.

내 레이아웃에는 두 개의 누적 된 행이 있습니다. 헤더 및 탐색 링크의 경우 다음 주 내용에 대해 두 개의 열이 있고 마지막으로 바닥 글에 대해 두 개의 행이 있습니다.

내 (진행중인) HTML 페이지의 body 태그와 아래 CSS 사이의 모든 것을 포함합니다. 이제 모든 것이 픽셀 단위입니다. 내가 옳고 그름에 대해 (예를 들어 너무 많은 컨테이너 등을 사용하고있는 것) 어떤 조언을 해줄 수 있다면 Flexbox를 어떻게 적용 할 수 있을지 가장 고맙겠습니다.

감사합니다.

body { 
    background-color: #C4C4C4; 
    font-family: 'Roboto', serif; 
    /*font-size: 48px;*/ 
    line-height: 25px; 
} 

#page-container { 
    margin: 0 auto; 
    width: 793px; 
} 

header { 
    background: url("../images/big-banner.jpg"); 
    background-size: 793px 285px; 
    background-repeat: no-repeat; 
    height: 285px; 
    /*height: 285px;*/ 
} 

header h1 { 
    padding: 70px 0 0 20px; 
    color: #FFFFFF; 
    font-size: 2.8em; 
} 

header p { 
    padding: 25px 0 0 20px; 
    color: #FFFFFF; 
    font-size: 1.4em; 
} 


h2 { 
    font-size: 1.4em; 
    font-weight: bold; 
    padding-bottom: 20px; 
} 

h3 { 
    font-size: 1em; 
    font-weight: bold; 
    padding-bottom: 20px; 
} 


p { 
    line-height: 1.7; 
    padding-bottom: 30px; 
} 

ul { 
    padding-left: 20px; 
} 

li { 
    list-style-type: disc; 
    line-height: 2em; 
    padding-left: 5px; 
} 

nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #605A52; 
} 

nav li { 
    float: left; 
    list-style-type: none; 
    padding: 0; 
} 

nav li a { 
    display: block; 
    color: #FFFFFF; 
    text-align: center; 
    font-size: 1em; 
    padding: 8px 15px 8px 15px; 
    text-decoration: none; 
} 

nav li a:hover { 
    color: #000000; 
    background-color: #FFFFFF; 
} 

strong { 
    font-weight: bold; 
} 

small { 
    font-size: 0.9em; 
} 


section { 

} 

article { 

} 

.contact-box { 
    height: 200px; 
    width: 200px; 
    background-color: #FFFFFF; 
    padding: 15px; 
    -webkit-box-shadow: -1px 3px 4px 0px rgba(102,102,102,0.73); 
    -moz-box-shadow: -1px 3px 4px 0px rgba(102,102,102,0.73); 
    box-shadow: -1px 3px 4px 0px rgba(102,102,102,0.73); 
} 

summary { 

} 


.content-container { 
    width: 793px; 
    width: 100%; 
    height: 100%; 
    display: flex; 
} 

/* left col */ 
.left-col { 
    padding: 40px 20px 60px 60px; 
    width: 450px; 
    float: left; 
} 

/* wull-width left col for contact page */ 
.full { 
    width: 100%; 
    padding-right: 40px; 
} 

/* right col */ 
.right-col { 
    background-color:#FFFFFF; 
    width: 243px; 
    float: left; 
    align-items: stretch; 
    height: 100%; 
    padding: 40px 20px 10px 20px; 
    margin: 10px 0 0 0; 
} 

.zebra-1, .zebra-2 { 
    text-align: justify; 
    margin: 10px 0 10px 0; 
} 

.zebra-1 { 
    background-color: #EDEDED; 
} 

.zebra-2 { 
    background-color: #FFFFFF; 
} 

.list-left, .list-right { 
    text-align: left; 
    float: left; 
    width: 43%; 
    padding-right: 5px; 
} 

footer { 
    clear:both; 
    background-color: #605A52; 
    padding-left: 10px; 
    color:#FFFFFF; 
} 

footer p { 
    padding: 10px; 
} 


     <div id="page-container"> 

       <header> 
        <h1>Main title here</h1> 
        <p>Sub title</p> 
       </header> 

       <nav role="navigation"> 
        <ul> 
        <li><a href="#">Link 1</a></li> 
        <li><a href="#">Link 1</a></li> 
        <li><a href="#">Link 1</a></li> 
        <li><a href="#">Link 1</a></li> 
        <li><a href="#">Link 1</a></li> 
        </ul> 
       </nav> 

       <div class="content-container zebra-1"> 
        <section class="left-col" role="main"> 
         <h2>Welcome</h2> 
         <p>Lorem ipsum 
         </p> 
         <p>Lorem ipsum 
         </p> 
        </section> 

        <div class="right-col zebra-1" role="complementary"> 
         <aside><div class="contact-box">Contact info here</div></aside> 
        </div> 
       </div> 



       <div class="content-container zebra-2"> 
        <section class="left-col" role="main"> 
         <h2>Another header</h2> 
         <p>Lorem ipsum 
         </p> 
        </section> 
        <div class="right-col zebra-2" role="complementary"> 
         <p>More stuff here</p> 
        </div> 
       </div> 

       <footer> 
        <p> 
        <small>Copyright info</small> 
        </p> 
       </footer> 

     </div> 

Answer 1

약간의 도움이 될 수 있습니다. 플렉스를 사용할 때 왼쪽 및 오른쪽 열의 너비를 지정하거나 부동시킬 필요가 없습니다.

우선 내가 다른 브라우저에 대한 적절한 플렉스 선언을 추가 .....이 일을 시도하고 당신이 어떻게 플렉스 작품의 아이디어를 얻을 것이다 :

.content-container { 
    width: 793px; 
    width: 100%; 
    height: 100%; 

     display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -ms-flex-flow: wrap; 
    -webkit-flex-flow: wrap; 
    flex-flow: wrap; 
} 

두 번째 왼쪽을 변경 오른쪽 열 :

/* left col */ 
.left-col { 
    padding: 40px 20px 60px 60px; 

     flex: 0 0 25%; 
    -webkit-flex: 0 0 25%; 
    -ms-flex: 0 0 25%; 
} 

/* right col */ 
.right-col { 
    background-color:#FFFFFF; 
    align-items: stretch; 
    height: 100%; 
    padding: 40px 20px 10px 20px; 
    margin: 10px 0 0 0; 

     flex: 0 0 25%; 
    -webkit-flex: 0 0 25%; 
    -ms-flex: 0 0 25%; 
} 

%를 변경하면 아이디어를 얻을 수 있습니다.