CSS(3) - flex

Flex Box

1. container, item 에 적용할 수 있는 속성값들이 존재한다.

[ container ]

attributes	explain	example
display		flex
flex-direction	중심축 정하기	- row (default) - row-reverse - column - column-reverse
flex-wrap	한 줄에 꽉차면 다음 줄로 넘어가게 할지 말지	- nowrap (default) - wrap
flex-flow	flex-direction + flex-wrap	flex-flow : column nowrap;
justify-content	중심축의 item들을 중심축 기준으로 어떻게 배치할 지 결정한다.	- flex-start - flex-end - center - space-around : item들을 둘러싸서 space를 넣어줌 - space-evenly : 똑같은 간격을 넣어줌 - space-between : 왼쪽과 오른쪽은 화면에 맞게 배치하고 중간에만    space를 넣어줌
align-content	반대축의 items을 어떻게 배치할 지 결정한다.	- space-between - center
align-items	중심축의 item들을 반대축 기준으로 어떻게 배치할 지 결정한다.	- center - baseline

[ item ]

attributes	explain	example
order	container 속 item의 순서를 지정할 수 있다.	- order: 0;  (default) - order: 3;
flex-grow	container사이즈가 늘어날 때 item 자신의 고유한 사이즈를 유지하지 않고, 지정한 기준에 맞춰 늘어나게 지정할 수 있다.	- flex-grow: 0; (default) - flex-grow: 2;
flex-shrink	container사이즈가 줄어들 때 item 자신의 고유한 사이즈를 유지하지 않고, 지정한 기준에 맞춰 줄어들게 지정할 수 있다.	- flex-shrink: 0; (default) - flex-shrink: 2;
flex-basis	item들이 공간을 얼마나 차지해야 하는지 세부적으로 명시 해줄 수 있다.	- flex-basis: auto; (default) - flex-basis: 50%;
align-self	item별로 item을 정리할 수 있다. (container에서 지정한 것을 벗어나서 item만 따로 지정하고 싶을 때)	- align-self: center;

 

2.  중심축, 반대축이 존재한다.

• item들이 위에서 아래로 나열되는 경우 -  수직축 : 중심축, 수평축 : 반대축.
• item들이 왼쪽에서 오른쪽으로 나열되는 경우 -  수평축 : 중심축, 수직축 : 반대축.

---

💡 CSS에서 알아두면 좋을 필수 사항

 

- % : 컨테이너 부모의 높이 얼만큼(~%) 채우겠다.

 

- vh : 부모와 상관없이 보이는 viewport의 높이를 얼만큼(~vh) 쓰겠다.

유용한 사이트

- COLOR_TOOL

- flexboxfroggy (flex 연습 사이트)

 

---

참고

- 드림코딩 앨리 - CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript