[Flex] 일분코딩

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

위 강의자료를 보면서 다시 한번 상기시키면 좋을만한 내용을 메모합니다.

 

 

inline-flex

inline-flex 라는게 있었네요. 몰라서 사용을 못했던 것 같습니다.

flex 를 사용하면 화면에 가로축을 모두 차지하게 되는데, inline-fliex 를 사용하면 element의 크기만큼 으로 container 가 줄어들기 때문에 빈 공간에 다른 element 가 올 수 있게 됩니다.

아래 그림에서는 ABC 가 옆으로 붙어있네요.

 

 

row - reverse , column - reverse

flex-direction 에서 row 와 column 은 당연하게 사용해야하는 것인데, reverse 가 있는 걸 인지하지 못했던 것 같습니다.

 

align-items 

align-items 의 디폴트 값이 stretch 라는 것을 상기하고 싶어서 메모합니다.

flex item 이 쭈욱 늘어날 수 있는게 디폴트가 stretch 여서 였네요.

 

align-content

flex-wrap: wrap 으로 설정된 상태에서, 아이템들의 행이 2줄이 상 되었을때 수직축 방향 정렬을 결정하는 속성입니다.

그렇게 많이 flex 를 사용했는데 align-content 의 용도를 이제야 알게 되었습니다. 반성합니다.

 

 

Flex 아이템에 적용하는 속성들

flex-basis 

기본값은 auto 입니다. (element width 크기) 

다음과 같이 flex-basis로 기본설정을 함으로써 100px 보다 작은 element 들은 100px 이 되고, 더 큰 element는 그대로가 됩니다.

 

flex-grow

flex-grow 의 디폴트 값은 0입니다. 1로 설정할 경우 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자를 제외한 비율로 나누어 가집니다.

 

다음 그림에 잘 설명이 되어있습니다. flex-basis 는 auto 이므로  flex-item 이 가지는 width 값 일겁니다. 

만약 width 값을 따로 주지 않았다면, 텍스트의 길이만큼 width 가 정해지게 되겠습니다.

 

 

flex-shrink

flex-shrink는 flex-basis 보다 작아질 수 있는지 아닌지를 결정하는 속성입니다.

default는 1 이며, flex box 가 자동으로 크기가 줄어드는 이유는 flex-shrink: 1 이 항상 적용이 되어 있기 때문입니다.

 

shrink 속성은 더 깊은 이해를 위해서 codepen으로 공부를 해봤습니다.

https://codepen.io/ehddud1006-the-looper/pen/ZExMEPe?editors=1100 

 

.item:nth-child(2){
  flex-grow:1;
  flex-shrink:0;
  width: 50px;
}

.item:nth-child(1){
  flex-grow:1;
  
}
.item:nth-child(3){
  flex-grow:1;
  
}

 

두번째 엘리먼트만 shrink:0 으로 주고, 나머지는 그대로 default인 1의 값을 갖습니다.

아래 그림을 보면 두번째 엘리먼트는 초록색영역을 유지하지만 나머지는 줄어있는 모습입니다.

이렇게 칼럼형 레이아웃에서 하나의 컬럼은 크기가 줄어들지 않아야할떄 유용한 것입니다.

 

flex 

위 요소 3가지를 한방에 사용할 수 있는 축약형 속성입니다.

순서는 flex-grow , flex-shrink , flex-basis 순입니다.

여기서 주의해야할 점은  flex: 1; 이런 식으로 flex-basis를 생략해서 쓰면 flex-basis의 값은 0이 된다는 것입니다.

 

이점에 대해서 알아야하는 이유는 다음과 같은 레이아웃을 잡을때 입니다.

아까 flex-grow 를 설명할때 flex-grow는 flex-basis 를 제외한 나머지 영역을 flex-grow 에 준 값의 비율만큼 늘린다고 하였습니다.

(공부했던 코드펜 주소를 남깁니다. https://codepen.io/ehddud1006-the-looper/pen/RwMYNjw?editors=1100) 

 

만약에 제가 모든 칼럼을 같은 비율로 레이아웃을 짜기 위해서 다음과 같은 코드를 사용했다고 생각합시다.

.container {
  display: flex;
  width:700px;
  background-color:yellow;
}

.item {
  margin: 5px;
  background-color:green;
  flex-grow:1;
}

 

그런데 결과는 그렇지 못합니다. 한번 봅시다.

언뜻 봐도 두번째 영역이 크죠? 

왜 이런 상황이 발생했을까요? 바로 flex-basis 가 auto 로 잡혀있기때문입니다.

아까 flex-grow는 flex-basis 를 제외한 영역을 같은 비율로 나눈다고 하였죠?

 

 

flex-basis 인 붉은색 영역을 제외하고 , 푸른색 영역을 비교해보면 동일한 비율이라는 것을 알 수 있습니다.

(컴퓨터는 잘못이 없습니다. 무지몽매한 내 뇌)

 

 

그렇다면 어떻게 해야할까요? 바로 방법이 있습니다. flex-basis 를 0으로 만들어주면됩니다!

.item {
  margin: 5px;
  background-color:green;
  flex-grow:1;
  flex-basis:0;
}

 

짜잔! 같은 비율이 된 것을 확인할 수 있습니다.

 

flex : 1 로 두면 flex-basis 가 0 이 된다는 것에서 이렇게 갑자기 딴길로 샌 것 같은데, 그만큼 flex-basis 가 0이 된다는 것을 모르고 썼다면 이러한 디테일을 놓칠 수 있기 때문에 주의해야한다고 생각합니다.

 

그러면 다단 컬럼을 만들때는 어떻게 해야할까?

다단컬럼을 사용할때는 flex basis 를 사용하는 것 보다. width 값을 사용하는 것이 좋다.

하지만 나는 flex basis 를 사용해도 충분할 것 같다고 생각한다. 왜냐면 문제 되는 부분이 nowrap 일때 인데 코딩할때 nowrap 을 자주 사용하지 않기 때문이다. 

혹시나 추후에 nowrap 을 사용해야할 일이 생긴다면 그떄는 width 값을 사용하는게 좋을 것 같다.

 

flex-basis 사용

https://codepen.io/ehddud1006-the-looper/pen/PoRXOLR

PoRXOLR

 

width 사용

https://codepen.io/ehddud1006-the-looper/pen/BarvmeV

BarvmeV

 

반응형 컬럼 만들기

min-height , height 차이

min-height 100vh 로 지정할 경우 브라우저 화면 이상의 높이도 그려주는 반면에 , height 로만 설정할 경우 딱 브라우저 100vh 만큼만 붉은색 보더가 그려지게 된다. 

 

https://codesandbox.io/s/competent-clarke-yu2cpu?file=/src/App.js 

competent-clarke-yu2cpu - CodeSandbox

 

 

하나의 요소가 우측에 붙어있는 레이아웃

다음과 같은 레이아웃을 구현하기 위해서는 어떻게해야할까? margin-left: auto 를 사용하면 된다.

 

 

header 와 본문 그리고 footer 가 있는 레이아웃

항상 가장 바깥의 컨테이너의 높이에 주의하자.

https://codesandbox.io/s/tender-cohen-273xgt?file=/src/App.js 

tender-cohen-273xgt - CodeSandbox

 

align-self

align-self 는 flex 요소에 align 속성을 주는 것이다.

우선순위는 align-self > align-items 이다.

https://codepen.io/ehddud1006-the-looper/pen/qBoLYxP

qBoLYxP