@media screen and () 예시

header{height: 100px;}

main{}

main .inner{display: flex;}

main .side-menu{height: 500px; flex: 0 0 200px; background-color: antiquewhite;}

main .contents{height: 500px; flex: 1; background-color: aqua;}

footer{height: 100px;}

@media screen and (max-width:767px){

  main .inner{flex-direction: column;}

  main .inner .side-menu{flex: 1;}

  main .inner .contents{}

}

원래 큰화면 대상으로 작업하다가.

보면 최대화면 크기가 767px 이하면 세로 방향으로 정렬.

 

 

 

 

 

/* 모바일 우선 */

header{height: 100px;}

main{}

main .inner{}

main .side-menu{height: 200px; background-color: antiquewhite;}

main .contents{height: 500px; background-color: aqua;}

footer{height: 100px;}

@media screen and (min-width:768px){

  main .inner{display: flex; justify-content: stretch;}

  main .inner .side-menu{flex: 0 0 200px;}

  main .inner .contents{height: 500px; flex: 1;}

}

원래는 flex 이런 거 없이 block 상태로 작업하다가 (그래서 세로로 찼음) 

최소한 크기가 768px 이상으로 넘어가면 flex 주면서 가로에 대한 정렬도 고려.