박스를 왼쪽 / 오른쪽으로 이동시켜 텍스트 포함 인라인 요소들이 주변을 wrapping 하도록 함
요소가 Normal Flow를 벗어나도록 함
<div class="box left">float left</div>
# 따로 빼두면 좋다
.left {
float: left
}
float를 쓴 뒤 아래 요소에 clear: both
를 넣어서 사용하면 해당 요소부터 다시 normal flow를 따르게 된다
float는 레이아웃을 구성하기 위해 필수적으로 활용되었으나 최근 flexbox, grid 등장과 함께 활용도가 낮아짐
활용전략은 노멀 플로우에서 벗어난 레이아웃 구성
원하는 요소들을 float로 지정하여 배치
레이아웃을 위해 탄생
행과 열 형태로 아이템들을 배치하는 1차원 레이아웃 모델
메인 기준 방향 설정
역방향의 경후 태그 선언 순서와 시각적으로 다르니 유의
아이템이 컨테이너를 벗어나는 경우 해당 영역 내에 배치되도록 설정
즉, 기본적으로 컨테이너 영역을 벗어나지 않도록 함
flex-direction과 flex-wrap의 shorthand
설정값을 차례로 작성
ex) flex-flow: row nowrap;
공간 배분
align-item에 아무것도 안주면 stretch
align-item: baseline;
베이스라인 기준으로 정렬하고 싶을 때 쓴다 (폰트 사이즈를 늘려보면 눈에 잘 보이지 않던 베이스라인을 체감할 수 있음)
교차축을 기준으로 여러 줄이 됐을 때 공간을 어떻게 배분할지 정하는 속성
모든 아이템을 교차축 기준으로 정렬
개별 아이템을 교차축 기준으로 정렬
! 컨테이너에 적용하는 것이 아니라 개별 아이템에 적용 !
이건 알아두자
display: flex;
justify-content: center;
align-items: center: