25.09.29 flex

[flex 세로 정렬] align-items

*flex-direction:row;일 때

flex-start : 위로

center : 중앙

flex-end : 아래로

 

[flex 세로 정렬] align-items

*flex-direction:column;일 때

flex-start : 아래로

center : 중앙

flex-end : 위로

 

[flex 가로 정렬] justify-content

*flex-direction:row;일 때

flex-start : 왼쪽

center : 중앙

flex-end : 오른쪽

 

[flex 세로 정렬] justify-content

*flex-direction:column;일 때

flex-start : 

center : 

flex-end : 

--------------------------------------------------------------------------------

[flex-direction](거꾸로 정렬) flex-item 방향

*방향에 따라서 flex-start값이랑 flex-end값이랑 반대로 작용한다.

row-reverse(기본값) : 가로 정렬 ○ ○ ● ●

column-reverse : 세로 정렬

○

○

●

●

flex-start (기본값) : 오른쪽, 하단

center : 중앙

flex-end : 왼쪽, 하단

 

[flex-direction](거꾸로 정렬) flex-item 방향

*방향에 따라서 flex-start값이랑 flex-end값이랑 반대로 작용한다.

row(기본값) : 가로 정렬 ●●○○

column: 세로 정렬

●

●

○

○

flex-start (기본값) : 왼쪽, 상단

center : 중앙

flex-end : 오른쪽, 하단

 

*공통(기본값,reverse)

-값에 따른 분류

align-items

row : 세로 → column : 가로

 

justify-content

row : 가로 → column : 세로

 

-방향에 따른 분류

row값일 때

align-items : 세로

justify-content : 가로

 

column값일때 

align-items : 가로

justify-content : 세로

----------------------------------------------------------

[inline] 브라우저에서 텍스트취급

*너비 높이 속성을 통해 커스텀X

- 기본적으로 알 수 없는여백값을가지고 있다.

- flex-item으로 변환해주면 inline값에서 flex-item 값으로 바뀌기 때문에 알 수 없는 여백값이 사라진다.