[길벗 학습단] 7장 효과적인 레이아웃을 위한 CSS 속성

1. 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기

1차원 레이아웃 : 가로나 세로 중 한 방향으로만 레이아웃을 설계하는 방식

1. 플렉스 박스 레이아웃 기본 속성

1. display 속성

모든 플렉스 박스 레이아웃은 display 속성값을 flex나 inline-flex로 지정
그러면 수직으로 정렬된 아이템이 수평으로 정렬됨

2. flex-direction 속성

row : 주축 방향을 왼쪽 -> 오른쪽
row-reverse : 오른쪽 -> 왼쪽
column : 위쪽 -> 아래쪽
column-reverse : 아래쪽 -> 위쪽

display를 flex 로 했더라도 flex-direction의 속성값을 column 으로 지정하면 다시 수평으로 정렬됨.

3. flex-wrap 속성

아이템이 container 영역을 벗어날 때 어떻게 처리할지 결정. 기본 속성값은 nowrap이다.

wrap : 아이템이 컨테이너 벗어나면 줄바꿈
wrap-reverse : wrap의 역방향으로 줄밤꿈

4. flex-flow 속성

flex-direction과 flex-wrap을 한번에 사용


flex-flow: <direction> <wrap>;

2. 플렉스 박스 레이아웃의 정렬 속성

1. justify-content 속성

플렉스 아이템을 주축방향으로 정렬할 때 사용하는 속성

2. align-items/align-self/align-content 속성

플렉스 아이템을 주축방향의 수직, 즉 교차축으로 정렬할 때 사용하는 속성
align-self는 align-items와 거의 같지만 이건 flex-wrap에 의해 아이템들이 두 줄 이상 되었을 때 사용한다.

답글 남기기

이메일 주소는 공개되지 않습니다.