html/css #18-plate 상하단 반응형 중앙정렬 (flex 정리)

<미션>

 

 

<발견한 풀이> 

1. 우선 flex를 통해 상하 중앙정렬 시켜주고

height: 600px

max-height: 80vh; 

ㄴ 고정값 600px 값이 max-height를 통해 중앙정렬된다! 

 

 

 

 

<풀이>

1. flex row로 작성

body {

    margin: unset;

}

.flex {

    box-shadow: inset 0 0 20px red;

    display: flex;

    height: 100vh;

    padding: 30px; /*창이 줄어들때 안정감 있게 줄어들기 위해서*/

    box-sizing: border-box;

}

.box {

    box-shadow: inset 0 0 20px blue;

    max-width: 960px;

    max-height: 600px;

    height: 100%;

    flex-grow: 1;

    margin: auto; /*중앙 정렬은 마진값으로 해준다. */

}

ㄴ flex-grow를 통해 width값은 전부 차게 된다. 

ㄴ max-height를 주고 height를 100%로 주면 반응형으로 작동한다. 

 

 

2. flex-direction: column으로 작성

body {

    margin: unset;

}

.flex {

    box-shadow: inset 0 0 20px red;

    display: flex;

    flex-direction: column;

    height: 100vh;

    padding: 30px; /*창이 줄어들때 안정감 있게 줄어들기 위해서*/

    box-sizing: border-box;

}

.box {

    box-shadow: inset 0 0 20px blue;

    flex-grow:1;

    width: 100%;

    max-width: 960px;

    max-height: 600px;

    margin: auto;

}

 

 

 

---

 

 

flex박스를 고정할 수 있는 프로퍼티 ? 

-flex-basis

-min-width

-width

 

프로퍼티를 조합하여 늘어나지 못하도록 방패로 막는다!
min-width: 길이값 + basis: 0  (basis: auto 초기값은 컨텐츠 크기만큼 늘어나니까 초기화를 해준다)

min-width: 0 + basis: 길이값

 

 

방 하나의 크기가 지정되어있을 때 나머지 방을 가득차게

flex-grow : 1 -> 해당 프로퍼티로 진행한다. 공백이 가득 차게 된다!  (flex-basis + a)

width: 100% -> shrink:1 기본값 떄문에  다른 방에 영향을 끼치므로 X

 

 

프로퍼티를 조합하여 나머지 방을 가득차게한다. 

flex-grow: 1 + flex-basis: 0 + min-width: 0 -> 해당 프로퍼티로 진행한다. flex-basis의 초기값 auto로 되어있으면 불안요소이다.

ㄴ min-width: 0은 어처구니 없이 긴 컨텐츠가 들어와도 늘어나지 않는다.

ㄴ 기본값인 min-width: auto는 컨텐츠에 따라서 크기가 잡히게 되어 영향을 끼치므로 0값을 주면 된다

더이상 밥 많이 담았다고 식판이 늘어나지 않는다!