display-flex

display: flex 속성을 통해 리액트앱을 만들때 각각의 위치를 잡아주도록 해보자.

 

* display: flex

우선, 모든 요소들을 감싸는 container에 display: flex를 적용하게되면

요소들의 width값 만큼 가로로 배치가 되게된다!

 

요소1 | 요소2 | 요소3

container에 안에 각각 요소가 요소1,요소2,요소3이라고 했을때 위와같이 각각의 width값에 맞게 가로로 배치될것이다.

(흡사 inline요소들처럼 배치되게된다.)

 

height 높이의경우 컨테이너의 높이만큼 늘어나게되므로, 레이아웃을 만들때 유용하게 사용할 수 있다.

(각 요소들 마다 높이를 별도로 지정해줄 필요가 없다.)

 

* 배치방향설정(flex-direction)

  - row : 아이템들이 행(가로) 방향으로 배치됩니다. (왼쪽기준)

  - column : 아이템들이 열(세로) 방향으로 배치됩니다.(블럭을 쌓아둔것처럼)

  - row-reverse : 아이템들이 역순으로 가로 배치됩니다.(오른쪽 기준)

  - column-reverse : 아이템들이 역순으로 세로 배치 됩니다.(순서가 역순으로)

    → 크기가 작은 모바일 기기에서 column으로 배치하다가 일정 폭 이상이 되면 row로 바꿔주는 식으로 반응형 레이아웃을 구현할 수도 있다고한다!

 

* 줄넘김처리설정(flex-wrap)

  - nowrap : 줄바꿈을 하지 않습니다. 넘치면 그냥 삐져 나간다.(기본값)

  - wrap : 줄바꿈을 합니다. float이나 inline-block으로 배치한 요소들과 비슷하게 동작

  - wrap-reverse : 줄바꿈을 하는데, 아이템을 역순으로 배치 ( 줄바꿈 대상이되는 아이템을 위로 보낸다고 생각하면된다.)

 

* flex-flow 

   flex-direction 과 flex-warp를 한번에 사용할 수 있는 단축속성

  flex-direction, flex-wrap의 순으로 한 칸 떼고 써주면된다!

  ex) 

  .container {

      flex-flow: row wrap;

}

 

* 정렬 

 

- justify : 가로세로 방향으로 정렬 

  justify-content 

  1) flex-start : 아이템들을 시작점으로 정렬한다. (flex-direction 방향에 따라  row 일경우 왼쪽, column일경우 위)

  2) flex-end : 아이템들을 끝으로 정렬한다.( flex-start와는 반대)

  3) center : 아이템들을 가운데로 정렬

  4) space-between : 아이템들의 사이(between) 균일한 간격으로 만들어준다.

  5) space-around : 아이템들의 둘레(around)에 균일한 각격으로 만들어준다.

  6) space-evenly : 아이템들의 사이와 양끝에 균일한 간격을 만들어준다.(IE와 엣지에는 지원이안된다.)

 

- align : 상하 방향으로 정렬 

   align-items

   1) stretch : 아이템들이 수직방향으로 끝까지 쭉 늘어난다.

   2) flex-start : 아이템들을 시작점으로 정렬한다.(flex-direction 방향에 따라  row 일경우 위, column일경우 왼쪽)

   3) flex-end : 아이템들을 끝으로 정렬한다.(flex-start와 반대)

   4) center : 아이템들을 가운데로 정렬한다.

   

 

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자