TIL
CSS(3) - flex
soomst
2022. 3. 21. 22:49
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) 쓰겠다.
유용한 사이트
참고
- 드림코딩 앨리 - CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지! | 프론트엔드 개발자 입문편: HTML, CSS, Javascript