[CSS] Flexbox

flexbox로 레이아웃을 구성한다는 것은 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법

 

# display: flex는 부모박스요소에 적용해, 자식박스의 방향과 크기를 결정하는 레이아웃 구성방법
<div>요소들은 별다른 설정을 해주지 않으면 위쪽에서부터 세로로 정렬, 가로로 넓게 공간을 차지한다.
부모요소인 <main>요소에 
display: flex; 작성하니 
자식요소인 <div>요소들이 왼쪽부터 가로로 정렬된것이다.

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

---

<부모요소에 적용해야하는 Flexbox속성들>
1.  flex-direction : 정렬 축 정하기
부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정합니다.
아무 설정도 해주지않으면 기본적으로 가로 정렬을 합니다.

 

2. flex-wrap : 줄 바꿈 설정하기
하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정합니다. 
설정해 주지 않으면 줄 바꿈을 하지 않습니다.   ( flex-wrap: nowrap )

3. justify-content : 축 수평 방향 정렬
자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정합니다.
flex-start/ flex-end/ center/ space-between/ space-around

4. align-items : 축 수직 방향 정렬
자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정합니다.
요소들이 가로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지, 
세로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지 정하는 속성입니다.
stretch/ flex-start/ flex-end/ center/ baseline

---

<자식요소에 적용해야하는 Flexbow속성>
부모요소에 적용해야 하는 속성들이 자식요소들의 정렬과 관련이 있었다면
자식요소에게 적용해야 하는 속성인 flex는 요소가 차지하는 공간과 관련이 있습니다.
flex: grow(팽창지수)  shfink(수축지수) basis(기본크기)
자식요소에 flex속성을 따로 설정해주지 않으면 기본값이 적용된다. 

왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치된다.

기본값
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

1.grow
grow(팽창 지수) 는 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지를 의미한다고 했습니다.

grow 의 기본 값인 0은 빈 공간이 있어도 늘어나지 않음을 의미합니다.

우선 box1만 flex-grow : 1 로 설정해보겠습니다. flex-grow 의 기본값은 0이므로 나머지 박스는 flex-grow : 0 인 상태입니다.

grow(팽창 지수) 는 정렬축 방향으로 빈 공간이 있을 때, 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율을 정하는 것이라고 생각하면 이해하기 쉽습니다.

팽창지수는 (자식 요소의 grow값) / (자식 요소들의 grow값의 총합) 의 비율로 빈 공간을 가져갑니다.

팽창지수의 절대적 크기가 아닌 총합에서의 비율로 빈 공간을 차지하게 되는 것이죠.

2.shrink (수축지수)

grow와 반대로, 설정한 비율만큼 박스 크기가 작아집니다. 비율이 클수록 더 많이 줄어드는 것이죠.

grow와 shrink 속성을 함께 사용하는 일은 추천하지 않습니다. grow 속성에 변화를 주는 방식을 권장합니다.

shrink속성은 width나 basis 속성에 따른 비율이므로 실제 크기를 예측하기가 어렵기 때문입니다.

flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방합니다.

 

3.basis(기본크기)

자식 박스가 flex-grow 나 flex-shrink 에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기입니다.

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

 

*basis auto와 basis 0은 다르다.

실습해본 결과 계산기에 AC있는 부분이 auto로 하면 밑에 숫자만 있는칸과 배열이 안맞는다.

근데 basis 0으로 하면 칸모양끼리만 배열을 맞춰서 아주 이쁜 배열을 만들수있다.

 

*참고

- width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선됩니다.

- 콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않습니다.

- (flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있습니다.