[2주차] Flexbox - 7일차

css 기본값 설정

*' '{ } : css을 본격적으로 작성하기 전에 공통적으로 기본값을 설정하고 시작한다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

HTML 문서는 기본적인 스타일을 가지고 있다. 때때로 HTML 문서가 갖는 기본 스타일이, 레이아웃을 잡는 데 방해가 되기도 한다.

이러한 수요에 따라 초기화(리셋)을 위한 다양한 라이브러리(Normalize.css)가 등장했지만, 사실 굳이 라이브러리를 사용할 필요는 없으며, 위에 언급한 문제를 해결할 몇 줄의 코드를 적용시키면, 기본 스타일링을 제거하여 디자인한 대로 레이아웃을 구현할 수 있다.

1. Flexbox

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

• display: flex 는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법이다.

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

• flex-direction : row 속성은 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정한다. 아무 설정도 해주지 않으면 기본적으로 가로 정렬을 한다.

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

• justify-content : 축 수평 방향 정렬
  

• align-items : 축 수직 방향 정렬
  나만의 이해 방법 : 위 그림 row에서 가로 방향으로 정확히 반으로 가상 선을 그으면 이해가 된다.
  마찬가지로 column에서 세로 방향으로 정확히 반을 나누면 이해가 될 것이다.
  flex-start와 baseline의 결과는 같다.

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

	flex:   <grow(팽창 지수)>    <shrink(수축 지수)>    <basis(기본 크기)>

• grow(팽창 지수) 는 정렬축 방향으로 빈 공간이 있을 때, 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율을 정하는 것이라고 생각하면 된다.
  팽창지수는 자식 요소의 grow값 / 자식 요소들의 grow값의 총합 의 비율로 빈 공간을 가져갑니다.

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

• basis(기본 크기) 는 자식 박스가 flex-grow 나 flex-shrink 에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기입니다. flex-grow 가 0일 때, basis 크기를 지정하면 그 크기는 유지됩니다.

flex:0 1 auto;

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
// 각 값 따로 지정 가능

자식 요소에 flex 속성을 따로 설정해주지 않으면 다음과 같은 기본값이 적용되며, 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치됩니다.

답변

(위 예시 설명) flex=basis: auto;는 기본축에서 아이템 차지 공간 제외한 여백을 아이템에 자동으로 골고루 배분합니다.
※ flex-grow, flex-shrink 값이 있을 때, 여백을 따라 변동이 가능. (기본값)
※ 아이템 길이 값 없는 경우, 그 안의 내용 길이에 의해 결정.

(아래 예시 설명) flex=basis: 0;은 기본축에서 flex-grow, flex-shrink 설정 비율대로 아이템 너비 배분합니다. (flex 단축 속성 사용 시, 기본값)
그 결과, 두 예시 중 실제로 1: 1: 1의 너비를 갖는 것은 아래 예시 입니다

여기서 주의해야 할 점,
flex-basis의 기본값은 auto이지만 단축 속성인 flex에서 flex-basis를 생략할 경우 0이 적용된다.

flex-grow를 제외한 개별 속성은 생략할 수 있다.
만약 flex: 1; 로 작성하면 flex-grow: 1;과 같다. 그러면 나머지 속성은 생략했으니 기본값이 적용되어 flex-shrink: 1;, flex-basis: auto;가 되겠죠?
그래서 flex: 1; 혹은 flex: 1 1;은 flex: 1 1 auto;와 같다고 볼 수 있다?
그렇지 않다. flex: 1; 혹은 flex: 1 1;은 flex: 1 1 0;이 된다는 것이다.

이 부분을 기억하지 않으면 엉뚱한 결과가 나올 수 있으니 주의해야 한다!