flex의 display와 flex-direction

✏ flex 설정의 기본 구조

 

✏ display

 

플렉스 컨테이너의 화면 출력의 특성을 정하는 속성이다.

flex와 inlien-flex가 있다, 그라면 그둘의 차이점을 알아보겠다.

 

1.flex

플렉스 컨데이너를 블록요소로 수평정렬이 되는 화면특성을 가지는 속성이다.

플렉스 컨테이너 들이 위에서 아래로 수직으로 쌓이는 모습을 볼 수 있다. (블록요소)

 

2.inlien-flex

일반적인 플렉스 컨데이너를 블록요소에서 인라인요소로  동작할 수 있도록 화면 특성을 가지는 방법이다.

3개의 플렉스 컨테이너 들이 블록 요소에서 인라인 요소로 동작되는 것을 볼 수 있었다.

그렇기에 수평으로 정렬이 되었다.

 

---

✏ flex-direction

 

플렉스 컨테이너 안에 있는 아이템들의 정렬의 주축 (main-axis)을 정하는 속성이다.

주축 (main-axis)을 수평(row)으로 할 것인지, 수직 (column) 으로 정렬할 것인지 정하는 속성이다.

그러나 보통적으로 정렬은 수직은 기본값으로 되어있기에 잘 사용하지는 않는다.

 

1. row

컨테이너 속 아이템들을 수평 정렬하는 속성이다. 

2. row-reverse

컨테이너 속 아이템들의 수평 정렬을 반대로 하는 속성이다.

3. column

컨테이너 속 아이템들을 수직 정렬하는 속성이다. (기본값)

위에서 아래로 쌓이는 것을 볼 수 있다.

4. column-reverse

컨테이너 속 아이템들을 반대로 수직 정렬하는 속성이다.

아래서 위로 쌓이는 것을 볼 수 있다.

---

₍ᵔ.˛.ᵔ₎