웹2 flex-direction

  1    flex-direction이란?

flex-item을 가로로 정렬할 것인지, 세로로 정렬할 것이지 결정하는 속성이다.

 

기본 값

  flex-direction: row;

 

  2    flex-direction 종류

종류

  flex-direction: row;
  flex-direction: row-reverse;
  flex-direction: column;
  flex-direction: column-reverse;

 

새로운 개념

  row(가로)를 colume(세로)로 바꾸면 가로 정렬할때  align-items을 사용해야한다.

  row(가로)를 colume(세로)로 바꾸면 세로 정렬할때   justify-content를 사용해야한다.

 

  column-reverse로 바꾸면 start가 end 역할을 하고, end가 strat 역할을 한다.

 

알고있는 개념

  justify-content  → 가로 정렬

  align-items → 세로 정렬

 

예제

 

------ flex-direction: row

 

 

 

 

------ flex-direction: row-reverse

 

 

 

 

 

------ flex-direction: column

 

 

 

 

 

------ flex-direction: column-reverse

 

 

 

 

 

------ flex-direction: column 세로 정렬

 

 

 

 

 

------ flex-direction: column 가로 정렬