[03] flex-direction 가로 정렬, 세로 정렬

어떤 요소에 display: flex 를 적용하면 해당 요소는 flex container로 바뀌게 됩니다. 이렇게 되면 해당 요소의 자식 요소들을 가로나 세로로 정렬할 수 있게 됩니다. 즉 display:flex;를 선언한 부모 요소에 flex-direction 속성을 설정하게되면 가로나 세로로 정렬할 수 있습니다.

flex-direction 속성 값들

• flex-direction 디폴트 값은 row 입니다.
• row : 자식 요소를 가로로 정렬한다.
• row-reverse : 자식 요소를 가로로 정렬하는데 역순으로 정렬한다.
• column : 자식 요소를 세로로 정렬한다.
• column-reverse : 자식 요소를 세로로 정렬하는데 역순으로 정렬한다.

#box {
    display: flex;
    flex-direction: row;
  }

#box {
    display: flex;
    flex-direction: row-reverse;
  }

#box {
    display: flex;
    flex-direction: column;
  }

  #box {
    display: flex;
    flex-direction: column-reverse;
  }

flex-direction 은 가로로 쌓고 싶다면 값을 row, 세로로 쌓고 싶다면 값을 column 으로 하면 된다.

[01] CSS flex 사용 전에 꼭 알아야할 기본 개념

[02] flex 속성 (부모속성, 자식속성) 이해

오늘은 flex의 부모 속성 중 가장 많이 사용되는 몇가지 중에서 flex-direction을 살펴 봤습니다.