TIL) CSS 레이아웃, Flexbox, flex : 1?

와이어프레임(Wireframe)이란?

웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계이다. 

아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도이고, 전환 효과나, 애니메이션, 사용자 테스트 같은 스타일링 요소나 UX(사용자 경험, User Experience)를 판단하는 것이 아니다.

 

목업(Mock-up)이란?

웹 또는 앱을 제품이라고 할 때, 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성하는 것.

 

 

=> 와이어프레임과 목업 작업은 js로 넘어가기 전, 설계도와 같다.

 

 

---

키포인트

• display: flex; 를 자식 요소가 아닌 부모 요소에 적용해야한다.
• flex-direction 을 이용하여 요소를 정렬할 방향을 결정할 수 있다.
• justify-content 와 align-items 를 이용하여 수평-수직 정렬을 결정할 수 있다.
• flex-grow 를 이용하여 요소를 얼마나 늘릴 것인지 결정할 수 있다.
• flex-basis 를 이용하여 요소의 기본 크기를 결정할 수 있다.

 

 

Flexbox 속성들을 활용하면 요소의 정렬, 요소가 차지하는 공간을 설정해줄 수 있다. 

 

display: flex;로 지정된 Flex Container는 Block 요소와 같은 성향(수직 쌓임)을 가지며,
display: inline-flex;로 지정된 Flex Container는 Inline(Inline Block) 요소와 같은 성향(수평 쌓임)

 

---

 

1. 부모 요소에 적용해야하는 Flexbox 속성

 

1) flex-direction : 자식 요소 정렬 축 정하기 / row(defalt), row-reverse, column, column-reverse

2) flex-wrap : 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 설정하기 / nowrap(defalt), wrap, wrap-reverse

3) justify-content : 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지(flex-direction에 따라 다름) / flex-start, flex-end, center, space-between, space-around

4) align-items : 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 (축 수직 방향 정렬) / flex-start, flex-end, center, baseline, stretch

 

 

2. 자식 요소에 적용해야 하는 Flexbox 속성

flex!

 

👇기본값 👇

flex: 0 1 auto;

 

순서대로 grow -  shrink - basis

 

1. grow : 정렬축 방향으로 빈 공간이 있을 때, 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율을 정하는 것

=> 자식 요소의 grow값 / 자식 요소들의 grow값의 총합의 비율로 빈 공간을 가져간다. 

 

2. shrink : 설정한 비율만큼 박스 크기가 작아진다. 

 

3. basis : 자식 박스가 flex-grow 나 flex-shrink 에 의해 늘어나거나 줄어들기 전(공간 배분 전)에 가지는 기본 크기이다. 

(flex-grow 가 0일 때, basis 크기를 지정하면 그 크기는 유지된다.)

 

 

---

참고

 

flex : 1; 만 적용한다면, 아래처럼 👇 적용한거다. 

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0 (would be the same as specifying "width: 0"/ 가능한 가장 작은 너비로 축소)

=> the flex base size will be 0 in the first case, so the flex items will have the same size after distributing free space.

 

 

flex-grow: 1; 을 적용한다면 아래처럼 👇 적용한거다. 

• flex-grow: 1
• flex-shrink: 1
• flex-basis: auto

=> each flex item will start with the size given by its content, and then will grow or shrink according to free space. Most probably the sizes will end up being different.

 

 

참고

• width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선.
• 콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장X.
• (flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있다.