250929 flex 연습

 

[flex 세로 정렬] align-items

※ flex-direction:row; 일 때,

flex-start : 위로

center : 중앙

flex-end : 아래

 

[flex 세로 정렬] align-items

※ flex-direction:column; 일 때,

flex-start : 위로

center : 중앙 

flex-end : 아래로

 

[flex-direction]flex-item 

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

row(기본값) : 가로 정렬 

ㅁㅁ

column : 세로 정렬 

ㅁ

ㅁ    

 

[flex 가로 정렬] justify-content

※ flex-direction:row; 일 때,

flex-start : 왼쪽

center : 중앙

flex-end : 오른쪽

 

[flex 가로 정렬] justify-content

※ flex-direction:column; 일 때,

flex-start : 오른쪽

center : 중앙 

flex-end : 왼쪽

 

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

※ 너비높이 속성을 통해 커스텀 x

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

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

 

 

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

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

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

column -reverse : 세로 정렬

○

○

●

●

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

center: 중앙

flex-end: 왼쪽, 상단

 

[flex-direction]

※ 방향에 따라서 align-items 값이랑 justify-content값이랑 반대로 작용한다.

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

column : 세로 정렬 

●

●

○

○

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

center: 중앙

flex-end: 오른쪽, 하단

 

(공통)

※ 값에 따른 분류

- align-items

row: 세로

column: 가로

- justify-content

row: 가로

column: 세로

 

※ 방향에 따른 분류

- row

row: 세로

column: 가로

- column

row: 가로

column: 세로

 

flex-wrap: wrap-reverse; → 개구리들 칸에 맞게 설정
flex-direction: column-reverse; → 세로로 정렬 하는데, 빨간 개구리 위치 바꿔주기
align-content: space-between; →  노란 개구리 끝에 배치 시켜주기
justify-content: center; →  노란 개구리 칸에 들어가게 해주기