아래 글은 유튜브 <1분 코딩>의 강의와 chatGTP와의 문답을 기초로 작성된 것임.
- 1분 코딩 님의 CSS Flexbox와 CSS Grid, 한번에 정리! 가 보기
flexbox
flexbox는 컨테이너(부모)한테 적용을 하면, 그 안의 자식 아이템들을 쉽게(=flexbox 규칙에 따라) 정리할 수 있다는 개념임. ('flex'의 사전적 의미는 "신축성 있는")
display: flex;
Flexbox에서는 부모 컨테이너를 "flex container"라고 하고, 이 안에 있는 자식 요소들을 "flex items"이라고 합니다. display: flex;를 부모 컨테이너에 선언하면 해당 컨테이너가 Flexbox 레이아웃 모드로 전환됩니다. Flexbox는 요소들을 수평 또는 수직 방향으로 유연하게 배치하기 위해 만들어진 CSS 레이아웃 모델입니다. 이제 Flexbox의 규칙에 따라 자식 요소들이 배치되게 됩니다.
display: flex; 라고 선언하면 왜 하필 가로로 배치되는 건지?
display: flex;를 부모 컨테이너에 선언하면 그 안에 있는 자식 요소들이 가로로 배치되는 이유는 Flexbox의 동작 원리 때문입니다. 기본적으로 flex-direction이 row로 설정되어 있기 때문에 자식 요소들은 가로로 배치됩니다. 이것은 Flexbox의 주요 특징 중 하나입니다. 만약 flex-direction: column;을 선언하면 자식 요소들이 세로로 배치될 것입니다. (from. chatGTP)
width는 자기 컨텐츠의 크기만큼 차지한다. (기본)
flex-direction: column; / flex-direction: row;
배치 방향을 세로로 바꿀 수 있음.
flex-direction: row-reverse; 우측에서 부터 순서대로 정렬 가능
flex-wrap: wrap;
flex items가 flex container 내에서 한 줄에 모두 배치되지 않을 경우 어떻게 처리할지를 지정하는 데 사용됩니다. 기본값은 'nowrap'임.flex-wrap:wap; 을 선언하면 뷰포트가 줄어들면 아이템들이 아래로 떨어지면서 여전히 화면에서 볼 수 있게 됨. (참고: 순서가 거꾸로 떨어지는 wrap-reverse 속성도 있음.)
justify-content:
flex items를 flex container 내에서 가로 방향으로 어떻게 정렬할지를 지정하는 데 사용됩니다.
-flex-start: flex items를 flex container의 시작 부분(왼쪽)에 정렬합니다.
-flex-end: flex items를 flex container의 끝 부분(오른쪽)에 정렬합니다.
-center: flex items를 가로 방향으로 가운데로 정렬합니다.
-space-between: flex items 사이에 균등한 간격을 만들어 줍니다.
-space-around: flex items 주위에 균등한 간격을 만들어 줍니다. (좌/우에 여백은 가운데 간격의 절반이 된다.)
-space-evenly: flex items 주위와 사이에 균등한 간격을 만들어 줍니다.
align-items:
flex items를 flex container 내에서 세로 방향으로 어떻게 정렬할지를 지정하는 데 사용됩니다. 기본값은
'stretch'라서 아래로 늘어나서 공간을 다 차지한 상태. (아래 그림 참조)
align-items의 속성값들
-flex-start: flex items를 flex container의 시작 부분(위쪽)에 정렬합니다.
-flex-end: flex items를 flex container의 끝 부분(아래쪽)에 정렬합니다.
-center: flex items를 세로 방향으로 가운데로 정렬합니다.
-baseline: flex items의 텍스트 기준선을 맞춥니다.
-stretch: flex items를 flex container의 높이에 맞게 늘립니다. (기본값)
가로 세로 모두 가운데에 정렬하려면?
당연히 justify-content도 align-items도 center로 지정하면 된다.
align-content
여러 줄로 나눠진 flex items를 flex container 내에서 세로 방향으로 어떻게 정렬할지를 지정하는 데 사용됩니다. align-content는 flex-wrap 속성에 의해 여러 줄로 나눠진 flex items에 영향을 미칩니다. 즉, flex-wrap: wrap;이 설정되어 있을 때만 align-content가 동작합니다. (간단히 말해서 wrap 지정이 된 상태에서 뷰포트가 줄어들 때 동작하게 된다는 뜻.) 한 줄로 배치되는 경우에는 align-items 속성이 정렬에 사용됩니다. 속성값은 align-items와 동일함.
여기까지는 container에 적용하는 속성들과 속성값이었고,
아래는 item에 직접 지정하는 속성들임.
flex-grow
flex item들이 flex container 내에서 사용 가능한 공간을 어떻게 나눌지를 지정하는 데 사용됩니다.
flex-grow: 1; 이렇게만 입력해도 이제 뷰포트와 함께 아이템들이 "신축성 있게" 늘어나고 줄어드는 상태가 되긴 하는데, 각 아이템 별로 비율(몇 대 몇 대 몇)을 따로따로 지정하면 그 비율이 유지된 채 늘어나고 줄어들게 됨.
중요한 건, flex-grow 적용 전에 "남아 있던" 공간을 놓고, 그걸 아이템들이 각자 얼마만큼 가져갈 지를 결정하는 것임. (← 이때 flex-basis의 속성값은 기본인 auto 임)
실제 비율을 구현하고 싶으면 ↓
flex-basis:
flex item의 초기 크기를 지정하는 속성입니다.
-auto: flex item의 크기는 내용물의 크기에 따라 자동으로 조정됩니다. (기본값)
-fixed: flex item의 크기는 지정된 크기로 고정됩니다.
-percentage: flex item의 크기는 부모 요소의 크기에 대한 비율로 지정됩니다.
-flex: flex item의 크기는 다른 flex item과의 크기 비율에 따라 조정됩니다.
flex-basis가 쓸 수 있는 단위는?
-px (픽셀)
-% (퍼센트)
-em (상위 요소의 폰트 크기)
-rem (루트 요소의 폰트 크기)
-vh (뷰포트의 높이)
-vw (뷰포트의 너비)
-fr (flex container의 크기에 대한 비율)
flex-basis: 0; 이건 쉽게 말해서 여백이 제로(0)가 되는 건가?
정확히 맞습니다! flex-basis: 0;은 flex item의 초기 크기를 0으로 설정하는 것을 의미합니다.
간단하게 말하면, flex-basis: 0;은 flex item이 flex container 내에서 초기에 어떤 공간도 차지하지 않도록 만드는 것입니다. 이렇게 설정하면, flex item들은 flex-grow 속성에 따라 남은 공간을 공평하게 나누어 차지하려고 합니다.
(1분 코딩님 설명으로는 flex-basis: 0; 으로 여백이 없어지면서 전체 컨테이너를 여백으로 인식해서 그걸 공평하게 나눠가지려 한다는 식으로 쉽게 생각할 수 있다고 함..)
그런데 여기에 각 아이템별로 서로 다른 flex-grow 속성값을 부여하면, 결국 각 아이템에 서로 다른 비율을 부여할 수 있게 됨. (정확히 말해서, flexible한 비율이지..)
flex-shrink:
flex item이 flex container 내에서 얼마나 줄어들 수 있는지를 지정하는 데 사용됩니다.
(그냥 축약형인 'flex'를 써도 된다.)
부모 컨테이너 A 안에 item1, item2, item3이 있다고 치자. 나는 이 3개의 아이템이 서로 다른 공간을 차지하도록 만들고 싶어. 그래서 flex-basis:0;으로 지정하고, 각 아이템에 flex: 1;, flex:2;, flex:1; 이라고 쳤어. 그러면 컨테이너 A 안의 아이템들은 시각적으로 1 대 2 대 1 비율로 보이게 되나?
각 아이템에 flex-grow:1;, flex-grow:2;, flex-grow:1; 으로 작성하거나 flex-shrink:1;, flex-shrink: 2;, flex-shrink: 1; 이라고 써도 시각적으로 1대 2대 1로 보이나?
네, 맞습니다! 컨테이너 A 안에 있는 각 아이템의 공간 차지 크기를 1대 2대 1 비율로 지정하려면 flex-basis: 0;을 설정하고, 각 아이템에 flex: 1, flex: 2, flex: 1을 지정하는 것으로 원하는 레이아웃을 구현할 수 있습니다. (from Bard)
align-self
개별적으로 설정된 flex item의 수직 정렬 방식을 지정하는 데 사용됩니다.
order
순서를 기입해서 바꿀 수 있다. (실제 html 구조가 바뀌는 건 아님!)
'frontend > CSS' 카테고리의 다른 글
| 컨테이너 또는 박스에 컨텐츠를 맞추려면? ★ (0) | 2023.07.28 |
|---|---|
| 왜 body에는 display: flex; 선언이 먹히지 않지? (0) | 2023.07.28 |
| flexbox와 CSS grid -- 둘 중에 (0) | 2023.07.28 |
| [필기] CSS Grid │ 1분 코딩 (유튜브) (0) | 2023.07.28 |
| [필기] 포지션 position │생활코딩 (0) | 2023.07.27 |
| box model 의 inline 상태에서의 높이와 너비 조정 (0) | 2023.07.27 |
| CSS selector cheat sheet [선택자] (0) | 2023.07.27 |
| selector의 기본 종류 (0) | 2023.07.27 |
