240730 flex

🎪 flex 게임

justify-content

다음의 값들을 인자로 받아 요소들을 가로선 상에서 정렬
ex ) justify-content: flex-end 는 요소를 오른쪽으로 이동시킨다.

flex-start : 요소들을 컨테이너의 왼쪽으로 정렬.
flex-end : 요소들을 컨테이너의 오른쪽으로 정렬.
center : 요소들을 컨테이너의 가운데로 정렬.
space-between : 요소들 사이에 동일한 간격을 둠.
space-around : 요소들 주위에 동일한 간격을 둠.

align-items

다음의 값들을 인자로 받아 요소들을 세로선 상에서 정렬

flex-start : 요소들을 컨테이너의 꼭대기로 정렬.
flex-end : 요소들을 컨테이너의 바닥으로 정렬.
center : 요소들을 컨테이너의 세로선 상의 가운데로 정렬.
baseline : 요소들을 컨테이너의 시작 위치에 정렬.
stretch : 요소들을 컨테이너에 맞도록 늘림.

flex-direction

다음의 값들을 인자로 받아 컨테이너 안에서 요소들이 정렬해야 할 방향을 지정

row : 요소들을 텍스트의 방향과 동일하게 정렬.
row-reverse : 요소들을 텍스트의 반대 방향으로 정렬.
column : 요소들을 위에서 아래로 정렬.
column-reverse : 요소들을 아래에서 위로 정렬.

📌 column-reverse 또는 row-reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀜
📌 Flex의 방향이 column일 경우 justify-content의 방향이 세로 로, align-items의 뱡향이 가로 로 바뀜

flex-wrap

nowrap : 모든 요소들을 한 줄에 정렬.
wrap : 요소들을 여러 줄에 걸쳐 정렬.
wrap-reverse : 요소들을 여러 줄에 걸쳐 반대로 정렬.

flex-flow ✨

flex-direction과 flex-wrap이 자주 같이 사용되기 때문에, flex-flow가 이를 대신할 수 있다.
이 속성은 공백문자를 이용하여 두 속성의 값들을 인자로 받는다.
예를 들어, 요소들을 가로선 상의 여러줄에 걸쳐 정렬하기 위해 flex-flow: row wrap을 사용할 수 있다.

#pond {
	display : flex ;
	flex-direction : column ;
	flex-wrap : wrap;
}

// 이것과

#pond {
	display : flex;
	flex-flow : column wrap;
}

// 이것은 같다 

order

각 요소에 적용할 수 있다. order의 기본 값은 0이며, 양수나 음수로 바꿀 수 있다.
-로 갈수록 앞으로 가게되며, +로 갈 수록 뒤로 가게 된다!

align-self

개별 요소에 적용할 수 있는 또 다른 속성.
이 속성은 align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용된다.
지정된 align-items 값을 무시 하고 Flex 요소를 세로선 상에서 정렬.

https://velog.velcdn.com/images/star1024/post/46526c82-8226-412f-9637-d99a08034ba5/image.png

align-content

여러 줄 사이의 간격을 지정할 수 있다. 이 속성은 다음의 값들을 인자로 받는다.

💡 align-content 여러 줄들 사이의 간격을 지정 vs align-items 는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는지를 지정
=> 한 줄만 있는 경우, align-content는 효과를 보이지 않는다.

flex-start : 여러 줄들을 컨테이너의 꼭대기에 정렬.
flex-end : 여러 줄들을 컨테이너의 바닥에 정렬.
center : 여러 줄들을 세로선 상의 가운데에 정렬.
space-between : 여러 줄들 사이에 동일한 간격을 둠.
space-around : 여러 줄들 주위에 동일한 간격을 둠.
stretch : 여러 줄들을 컨테이너에 맞도록 늘림.