레이아웃 설계(1차원/ flexbox layout )

• 1차원 레이아웃: flexible box layout 속성으로 설계함.
• 2차원 레이아웃: grid layout 속성으로 설계함.

​

​

​

​

1.1차원 레이아웃 설계 (flexible box layout)

​

 

1.1. 플렉스 박스 레이아웃이란

-main axis : 수평한 축

-cross axis : 수직한 축

-flex container : display 속성값으로 flex or inline-flex 가 적용된 요소

-flex item: 플렉스 컨테이너와 자식관계를 이루는 태그 구성요소

​

​

​

1.2. 기본 속성

​

★display속성

ㄴdisplay: flex; /*inline-flex*/

flex	다음 요소가 줄 바꿈 됨
inline-flex	다음 요소가 주변에 배치 됨

-플렉스 아이쳄이 수직에서 수평 방향으로 배치 됨. (기존에 아이템이 가진 박스 성격은 무시 됨.)

​

​

★flex-direction 속성

ㄴflex-direction: 속성값;

​

row	주축 방향을 왼쪽 -> 오른쪽으로 지정
row-reverse	오른쪽 -> 왼쪽으로 지정
column	위 -> 아래로 지정
column-reverse	아래 -> 위로 지정

row

 

row-reverse

 

column

 

 

column-reverse

 

​

★flex-wrap 속성

ㄴ flex-wrap: 속성값;

nowrap	플렉스 아이템이 플렉스 컨테이너를 벗어나도 무시함
wrap	벗어나면 줄 바꿈
wrap-reverse	벗어나면 wrap의 역방향으로 줄 바꿈

nowrap

 

 

wrap

 

 

wrap-reverse

 

​

​

​

★flex-flow 속성

ㄴ flex-flow: <flex-direction><flex-wrap>;

: 두 가지 속성을 한 번에 적용할 수 있음.

ex) flex-direction:column;

flex-wrap:nowrap;

​

-> flex-flow: column nowrap;

​

​

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

​

★justify-content 속성

ㄴ justify-content: 속성값;

flex-start	주축 방향의 시작을 기준으로 정렬함
flex-end	주축 방향의 끝을 기준
center	주축 방향의 중앙에 정렬함
space-between	플렉스 아이템 사이의 간격을 균일하도록 정렬함
space-around	플렉스 아이템의 둘레(around)가 균일하도록 정렬함
space-evenly	플렉스 아이템 사이와 양끝의 간격이 균일하도록 정렬함

​

​

★align-items / align-content / align-self 속성

ㄴ align-items: 속성값;

stretch	교차축 방향으로 플렉스 아이템의 너비나 높이가 늘어남
flex-start	교차축 방향의 시작을 기준으로 정렬함
flex-end	교차축 방향의 끝을 기준으로 정렬함
center	교차축 방향의 중앙을 기준으로 정렬함
baseline	플렉스 아이템의 baseline을 기준으로 정렬함

-align-items 속성: 한 번에 정렬

-align-self 속성: 각각 정렬

​

​