플렉스 박스로 레이아웃 설정

Question

나는 아래 와이어 프레임을 가지고 있으며 이것을 flexbox으로 코드화하는 가장 좋은 방법을보고 싶다.

필자는 simple flexbox grid system을 코딩했지만 내 와이어 프레임은 그리드 시스템에있는 것보다 더 많은 사용자 정의가 필요합니다.

나는 부모 DIV가 display: flex을 가지고 있고이 자식 div의이 flex:1 및 flex: 0 0 40%을 가지고 있습니다. 나머지 주 래퍼 (전체 회색 상자 세트는 max-width: 1400px)로 유지되는 콘텐츠 div (파란색과 빨간색의 회색 상자 내부)를 추가하는 가장 좋은 방법은 무엇입니까?

감사합니다.

Answer 1

다음은 일반적인 개념입니다.

위치 지정된 의사 요소 (행의 각 섹션에 하나씩). 적절한 너비 (body에는 overflow-x:hidden이어야 함)와 적절한 위치 지정 값이 있어야합니다.

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    overflow-x: hidden; 
 
} 
 
.wrapper { 
 
    min-height: 100vh; /* for demo purposes */ 
 
    width: 60%; 
 
    margin: auto; 
 
    background: grey; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
header { 
 
    height: 20vh; 
 
    background: green; 
 
} 
 
.inner { 
 
    height: 30vh; 
 
    display: flex; 
 
} 
 
main { 
 
    background: blue; 
 
    flex: 1; 
 
    border: 2px solid black; 
 
} 
 
aside { 
 
    background: red; 
 
    flex: 0 0 40%; 
 
    border: 2px solid black; 
 
} 
 
.other { 
 
    background: pink; 
 
    flex: 1; 
 
} 
 
/* magic section */ 
 

 
.extend { 
 
    position: relative; 
 
} 
 
.extend::after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100vw; 
 
    top: 0; 
 
    height: 100%; 
 
    background: inherit; 
 
    z-index: -1; 
 
} 
 
.left::after { 
 
    right: 0; 
 
} 
 
.right::after { 
 
    left: 0; 
 
}

<div class="wrapper"> 
 
    <header></header> 
 
    <div class="inner"> 
 
    <main class="extend left"></main> 
 
    <aside class="extend right"></aside> 
 
    </div> 
 
    <div class="other"></div> 
 
</div>