html/css #8-flex-direction

 

flex-direction : column이 되면 기존에 row일 때 justify-content와 align-items의 개념이 반대로 된다고 생각하면 된다.
상하 정렬 : justify-content
좌우 정렬 : align-items

row -> 열 , column -> 열에 해당하는 값(행)

 

flex-direction

훨씬 더 자유도 높게 배치할 수 있다. 

row : 가로열

row-reverse : 가로열 반대를 기준으로 배치

column: 세로로 배열한다. 

flex-direction: row

flex-direction: column / align:items가 stretch 상태이기 때문에 이렇게 길다.

 

margin-top : auto를 준 모습

 

 

flex-direction:cloumn 을 유의하자

• 우리가 아는 가로 세로 상식이 바뀌니까 유의하자

ex) flex-basis는 이제 더이상 width의 개념이 아니고 height가 됨

flex-basis: 300px을 준 모습

*참고 : 상하 gap을 주기 위해 flex-direction: column을 쓰는 경우도 있음

 

 

이미지는 align-items:stretch로 이미지가 늘려지면 높이도 함께 비율적으로 늘어난다. (div로 묶지 않았다는 전제)