CSS layout 하기 전 초기화

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

CSS 레이아웃 하기 전에 브라우저마다 기본 default값이 다르기 때문에
위와 같이 박스 사이징과 margin, padding을 설정(초기화)해주면 레이아웃하기 편하다.

flexbox로 레이아웃 설정

{ display: flex; }

부모 박스에 적용하여 자식 박스의 방향과 크기를 결정해준다.

{ flex-direction : row (기본값 수직), column(수평); }	

위와 마찬가지로 부모 박스에 적용시켜 자식 박스를 수직 및 수평 분할해준다.

{   flex: 0 1 auto;
  /*flex : <grow> <shrink> <basis>*/ }

• 자식 박스의 flex 속성 : grow(팽창 지수), shrink(수축 지수), basis(기본 크기) 기본값은 0 1 auto

• 주로 grow 속성을 변경해 크기 조절 shrink 속성은 보통 기본값 1로 둔다.
  grow가 0일 때 basis 크기를 지정하면 고정크기 보장

컨텐츠 정렬

{ justify-content : 
		flex-start
		flex-end
		center
		space-between }

부모 박스에 justify-content 속성을 이용하면, 자식 박스의 수평 정렬 속성 지정

{ align-items : 
	 	flex-start
	 	flex-end
	 	center
	 	stretch }

부모 박스에 align-items 속성을 이용하면, 자식 박스의 수직 정렬 속성 지정