✅ Flexbox
이전의 웹 페이지의 레이아웃은 CSS display, float, position과 같은 속성을 사용해 구현했지만, 이 속성들은 구현 방법이 복잡하고 표현할 수 있는 레이아웃에 한계가 있다
flexbox는 이전 레이아웃 구현방식의 단점을 보완한 방식으로
화면의 크기가 동적으로 변할때에도 요소의 크기와 순서를 ✨유연하게 배치✨할 수 있다
📌 flexbox 구성
- flex container : 여러개의 item을 감싼 부모 요소
- flex item : 자식 요소
- main axis : 메인 축
- cross axis : 반대 축(메인 축과 수직)
📌 Flex Container 속성(상위 속성)
display: flex
: flex container를 정의하는 속성이며, 자식 요소들을 flex로 활성화 시킨다
flex-direction
: main axis를 지정하는 속성으로, 아이템들이 컨테이너 안에서 배치되는 방향을 정의한다
- row (기본값)
- 가로 방향으로 아이템들을 정렬한다
(main axis: 가로 / cross axis: 세로)
- column
- 세로 방향으로 아이템들을 정렬한다
(main axis: 세로 / cross axis: 가로)
flex-wrap
: 줄바꿈 속성
-
nowrap (기본값)
- 모든 아이템들을 한 줄에 표시한다
-
wrap
- 아이템들의 크기를 유지하며, 너비가 줄어들면 아래로 줄바꿈한다
-
wrap-reverse
- 아이템들을 아래에서 위로 줄바꿈한다
💡 flex-flow
: flex-direction과 flex-wrap의 축약표현
justify-content
: main axis에 따른 정렬 속성, 아이템을 정렬한 뒤 컨테이너의 남은 여백을 어떻게 분배할지도 설정한다
- flex-start (기본값)
- 왼쪽에서 오른쪽으로 아이템들이 정렬된다
- flex-end
- 오른쪽에서 왼쪽으로 아이템들이 정렬된다
- center
- 아이템들이 가운데로 정렬된다
- space-between
- 아이템들이 컨테이너 가장자리 양 끝까지 차지하며, 사이 여백은 자동조절된다
- space-around
- 각 아이템 주변으로 약간의 여백을 두고 정렬된다
- space-evenly
- 컨테이너 양 끝과 안 아이템들의 여백 모두 동일하게 정렬된다
align-items
: cross axis를 기준으로 전체 아이템들에 대한 정렬 속성
- flex-start
- 반대 축의 시작부분에 배치된다
- flex-end
- 반대 축의 끝부분에 배치된다
- stretch (기본값)
- 컨테이너를 채우기 위해 늘여서 맞춘다
- center
- 반대 축의 중앙에 배치된다
- baseline
- text의 베이스라인에 맞춰 모든 아이템들이 정렬된다💡 baseline?
📌 Flex Item 속성(하위 속성)
order
: 플렉스에서 아이템들은 기본적으로 작성된 순서대로 배치된다
아이템들의 순서를 변경하고 싶을 때 사용하는 속성으로, 값에 번호를 매겨 사용한다
flex-grow
: 아이템이 컨테이너 내에서 증가하는 비율을 정의하는 속성
(음수값은 허용되지 않음❌)
컨테이너가 동적으로 변화할때 item1은 item2의 2배로 증가하게 된다
flex-shrink
: 아이템이 컨테이너 내에서 축소되는 비율을 정의하는 속성
(flex-grow와 마찬가지로 음수값은 허용되지 않음❌)
flex-basis
: 아이템의 기본 크기를 설정하는 속성
(✨main axis: row -> 너비, column -> 높이에 해당)
- auto (기본값)
- 해당 아이템 컨텐츠의 크기(width, height를 설정하지 않은 경우)
- width / height
- 아이템의 지정 너비 및 높이(px, %, rem)💡 flex
: flex-grow, flex-shrink, flex-basis의 축약표현
서로 연관이 깊은 속성들이므로, 축약표현을 사용하는 게 편리하다 !
기본값은 flex: 0 1 auto;
✨ flex-shrink 및 flex-basis는 선택사항 !
✨ flex-basis를 0으로 설정하면 아이템 안의 여백없이
컨테이너 안에서 아이템들을 원하는 비율로 분할해 배치할 수 있다
align-self
: cross axis를 기준으로 아이템 각각의 정렬을 지정할 수 있는 속성
✨ align-self는 align-items보다 우선권을 가진다
(전체 속성보다 개별 속성을 우선시 한다는 뜻 !)
- auto (기본값)
- align-items의 속성을 상속받는다
- flex-start
- 반대 축의 시작부분에 배치된다
- flex-end
- 반대 축의 끝부분에 배치된다
- stretch
- 컨테이너를 채우기 위해 늘여서 맞춘다
- center
- 반대 축의 중앙에 배치된다
- baseline
- text의 베이스라인에 맞춰 아이템이 정렬된다
💡 flexbox 참고
1분코딩 https://studiomeal.com/archives/197
CSS Tricks https://css-tricks.com/snippets/css/a-guide-to-flexbox/
