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