Flex
가 나온 이후로 자주 사용하지는 않지만, float
으로 작성된 레이아웃의 유지 보수를 위해 알아둬야 할 필요가 있다.
일반적인 흐름에서 벗어나기 때문에 상위 요소를 뚫고 나가는 경우가 생기는데, 형제 요소에 clear
속성을 정의해서 이러한 문제를 해결한다.
float
을 사용해서 정렬하는 요소들에 float
이 부여되지 않은 형제 요소를 추가하면 UI 버그가 발생한다. 그래서 float
을 사용할 땐 정렬이 필요한 요소들만 묶어준다.
float
속성이 부여된 요소는 display
속성이 block
으로 변경된다.
absolute
는 부모를 타고 올라가며, position이 static이 아닌 요소 중 먼저 발견한 요소를 기준으로 배치된다.
fixed
는 기본적으로 viewport를 기준으로 배치되지만, 조소 요상 중 transform, perspective, filter 속성 중 하나라도 none
이 아니면 해당 요소를 기준으로 배치된다.
z-index
값은 position이 static
이 아닌 경우에만 적용된다. 그 외에도 flex
와 grid
에서도 적용된다.
position 값이 absolute
혹은 fixed
일 때 display가 block으로 변경된다.
1차원 레이아웃 구조를 만들 때 사용
flex
container가 block 요소의 성질을 가짐
container들이 수직으로 배치되며, 가로로 늘어나는 특징을 가짐.
inline-flex
컨테이너가 inline 요소의 성질을 가짐
container들이 수평으로 배치되며, item의 크기에 맞춰서 가로로 줄어드는 특징을 가짐.
flex의 main-axis를 정하는 속성, 기본값은 row다.
row
수평 방향으로 item을 나열한다
왼쪽에서 오른쪽으로 나열되며, row-reverse는 반대로 오른쪽에서 왼쪽으로 나열된다.
column
수직 방향으로 item을 나열한다.
위쪽에서 아래쪽으로 나열되며, column-reverse는 반대로 아래쪽에서 위쪽으로 나열된다.
flex의 줄바꿈을 처리하는 속성, 기본값은 nowrap이다.
nowrap
wrap
wrap-reverse
main-axis의 정렬 방법을 정하는 속성, 기본값은 flex-start다.
flex-start
flex-end
center
space-between
space-around
cross-axis의 정렬 방법을 정하는 속성, item이 한 줄일 때 사용한다. 기본값은 stretch다.
stretch
item의 height가 컨테이너의 height에 맞춰서 늘어나도록 한다.
item의 height를 명시해주면 stretch 속성은 무시된다.
flex-start
flex-end
center
baseline
align-item과 비슷하지만, item이 두 줄일 때 사용한다. 기본값은 stretch다.
flex-start
flex-end
center
space-between / space-around
flex-item의 증가 너비 비율을 설정, 기본값은 0이다.
비율을 정하는 기준은 기본 너비를 제외한 나머지 영역이다.
각 item의 비율을 일치시키고 싶다면 auto
를 기준으로 하면 된다.
flex-item의 감소 너비 비율을 설정, 기본값은 1이다.
flex-item의 기본 너비를 설정한다. 기본값은 auto다.
flex-item의 순서를 지정하는 속성, 값이 클수록 뒤에 배치된다. 기본값은 0이다.
HTML 구조를 변경하지 않고도 item의 순서를 변경할 수 있다.
음수도 사용이 가능하다.
flex-item에 개별적으로 cross-axis 정렬이 가능한 속성, 기본값은 auto이며, align-items의 값을 상속받는다.