CSS float, flexbox

Float

• none/ left/ right 설정 가능
• text 및 inline 요소가 그 주위를 감싼다.

clearfix::after {
	content: "";
	display: block;
	clear: both;
}

Flexobox

Q. Flexbox를 쓰는 이유는?
1. 공간 배분
2. 정렬
3. 1차원 레이아웃

가장 중요한 것은 요소와 축!!

부모 container가 컨트롤하기 때문에
부모 태그에 꼭 display: flex 혹은 display:inline-flex
inline-flex는 요소만큼만 공간을 차지한다.

flex direction -> 메인 축의 방향 4가지
(row, row-reverse, column, column-reverse)

justify-content -> 메인 축의 정렬
(space-round, space-evenly,,,,)

flex-wrap -> 강제로 한 줄 배치

flex-grow -> direction +wrap의 shorthand

---

[교차축 정렬]
align-contents -> 여러 줄
align-items -> 한 줄
align-self -> 요소 하나 하나

order -> 순서 바꾸기, 기본값은 0
flex-grow -> 남은 공간을 배분

---

Bootstrap

허,,,,,, 넘 어렵다,,,

[그리드 시스템]

12columns
6tiers