Flexbox에 대하여
대부분 사이트는 전체 레이아웃이 수직 구성이며 ‘위-아래’로 스크롤 하여 사용합니다.
레이아웃을 구성할 때 가장 많이 사용하는 요소(Elements)들이 기본적으로 블록(Block) 개념으로 표시(Display)되며 이는 뷰(View)에 수직(위에서 아래로)으로 쌓이기 때문에 수직 구성은 상대적으로 쉽게 만들 수 있습니다.
하지만 수평(왼쪽에서 오른쪽으로) 구성의 경우는 상황이 조금 다릅니다.
문제는 수평 구조를 만드는 속성이 명확하지 않았기 때문인데, 그래서 많은 경우
나 float 혹은 inline-block 등의 도움을 받았습니다.하지만 이러한 방법들은 다양한 문제를 가지고 있기 때문에 결국 수평 레이아웃 구성의 차선책일 뿐이며, 이제 우리는 Flex(Flexible Box)라는 명확한 개념(속성들)으로 레이아웃을 쉽게 구성할 수 있습니다.
Flex는 크게 두개의 개념으로 이루어져있습니다. 첫번째는 부모 요소인 Container, 두번째는 자식 요소인 Items입니다.
1. Flex Container 속성
| 속성 | 의미 | 종류 |
|---|---|---|
| display | flex로 설정 | |
| flex-direction | flex items의 주축을 설정 | row(default), row-reverse, column, column-reverse |
| flex-wrap | flex items의 여러줄 묶음 설정 | nowrap(default), wrap, wrap-reverse |
| flex-flow | flex-direction과 felx-wrap의 단축 속성 | flex-direction속성 flex-wrap 속성 |
| justify-content | 주축(main-axis)방향으로 정렬 | flex-start(default), flex-end, center, space-between, space-around, space-evenly |
| align-content | 교차 축(cross-axis)방향으로 정렬(2줄 이상) | stretch(default), flex-start, flex-end, center, space-between, space-around, space-evenly |
| align-items | 교차 축(coress-axis)에서 items의 정렬 방법을 설정(1줄) | stretch(default), flex-start, flex-end, center, baseline |
display:flex , display:inline-flex 뭐가 다르지..?
컨테이너(부모요소)에서 선언하게 되는 display:flex 와 display: inline-flex의 차이점은 컨테이너 자체가 block형태인지 inline형태인지를 결정한다.(inline형태는 margin, padding값 등을 설정할 수 없다.)
2. Flex items 속성
| 속성 | 의미 | 종류 |
|---|---|---|
| order | Flex items의 순서를 설정 | ...1,0(default),1... |
| flex | flex-grow,flex-shrink,flex-basis의 단축속성 | 0 1 auto |
| flex-grow | Flex item의 증가 너비 비율을 설정 | 0(기본값) |
| flex-shrink | Flex item의 감소 너비 비율을 설정 | 1(기본값) |
| flex-basis | Flex item의 (공간 배분 전)기본 너비 설정 | auto(기본값) |
| align-self | 지정된 align-items 값을 무시하고 Flex요소를 세로선에서 정렬합니다. |
헷갈릴 만한 요소들
1. 주 축(main-axis)과 교차 축(cross-axis)
위에서 언급했었던 주 축(main-axis)과 교차 축(cross-axis)의 개념은 다음과 같습니다.
값 row는 Items를 수평축으로 표시하므로 이때는 주 축이 수평이며 교차 축은 수직이 됩니다.
반대로 값 column은 Items를 수직축으로 표시하므로 주 축은 수직이며 교차 축은 수평이 됩니다.
즉, 방향(수평, 수직)에 따라 주 축과 교차 축이 달라집니다.
order Item의 순서를 설정합니다.
Item에 숫자를 지정하고 숫자가 클수록 순서가 밀립니다.
음수가 허용됩니다.
2. flex-grow
모든 Items의 총 증가 너비(flex-grow)에서 각 Item의 증가 너비의 비율 만큼 너비를 가질 수 있습니다.
예를 들어 Item이 3개이고 증가 너비가 각각 1, 2, 1이라면, 첫 번째 Item은 총 너비의 25%(1/4)을, 두 번째 Item은 총 너비의 50%(2/4)를, 세 번째 Item은 총 너비의 25%(1/4)을 가지게 됩니다.
3. flex-shrink
감소 너비(flex-shrink)는 요소(width, height, flex-basis 등 )의 너비에 영향을 받기 때문에 계산하기 까다롭다. 영향을 미치기 시작한 지점부터 줄어든 거리만큼 감소 너비 비율에 맞게 item의 너비가 줄어든다.
예를 들어 Container의 너비가 줄어 Item의 너비에 영향을 미치기 시작한 지점부터 실제 줄어든 거리가 90px일 때,
요소 너비가 같은 Item이 2개이고 지정된 감소 너비가 각각 2와 1이라면, 감소 너비는 2:1 비율이며,
첫 번째 Item은 90px의 2/3인 60px 만큼 너비가 감소하고,
두 번째 Item은 90px의 1/3인 30px 만큼 너비가 감소합니다.
다른 예시로 Container의 너비가 줄어 Item의 너비에 영향을 미치기 시작한 지점부터 실제 줄어든 거리가 90px일 때, 요소 너비가 다른 Item이 2개이고 요소 너비는 각각 200과 100이고,
지정된 감소 너비가 각각 2와 1이라면,
200 x 2 = 400과 100 x 1 = 100 즉 감소 너비는 4:1 비율이며,
첫 번째 Item은 90px의 4/5인 72px 만큼 너비가 감소하고,
두 번째 Item은 90px의 1/5인 18px 만큼 너비가 감소합니다.
CodeSandbox twittler 목업실습!
일기- 드디어 5일만에 페어 실습을 해보았다. 다행히도 잘하시는 분이 페어로 지정되어서 수월하게 해결되었다. 온라인 강의만 듣다가 동기분과 말하게되어 재밌게 실습을 했다. 옛 조상들이 엄청난 데이터를 가지고 아마 작심삼일이란 사자성어를 만들었을 것이다. 그래도 3일은 열심히했다!!. 하지만 4일차가 되니까 너무 귀찮았다.... 하루에 하나씩 글쓰기... 다시 맘잡고 열심히 해야겠다..
flexbox가 자세히 이해가 안된다면 아래 출처에서 확인해보세요. 정말 자세하게 설명되어 있습니다.
'백엔드 부트캠프 > TIL' 카테고리의 다른 글
| [TIL] DAY-7 git에 대해 알아봅시다 (0) | 2022.05.03 |
|---|---|
| [TIL] DAY-6 CLI 명령어에 공부해 보았다. (0) | 2022.05.02 |
| [TIL] DAY-3 HTML과 CSS에 대하여 (0) | 2022.04.27 |
| [TIL] DAY-2 컴퓨터의 이해, 웹 클라이언트와 웹 서버 (0) | 2022.04.27 |
| [TIL] 백엔드 부트캠프 시작 (0) | 2022.04.25 |