justify-content
를 사용하여 이 CSS 속성은 요소들을 가로선 상에서 정렬하며 다음의 값들을 인자로 받는다는 것을 기억하세요
flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.center: 요소들을 컨테이너의 가운데로 정렬합니다.space-between: 요소들 사이에 동일한 간격을 둡니다.space-around: 요소들 주위에 동일한 간격을 둡니다.
align-items
를 사용하여 이 CSS 속성은 다음의 값들을 인자로 받아 요소들을 세로선 상에서 정렬합니다
flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.stretch: 요소들을 컨테이너에 맞도록 늘립니다.
flex-direction
을 사용하세요. 이 CSS 속성은 다음의 값들을 인자로 받아 컨테이너 안에서 요소들이 정렬해야 할 방향을 지정합니다:
row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.column: 요소들을 위에서 아래로 정렬합니다.column-reverse: 요소들을 아래에서 위로 정렬합니다.
order
때때로 컨테이너의 row나 column의 순서를 역으로 바꾸는 것만으로는 충분하지 않습니다. 이러한 경우에는 order
속성을 각 요소에 적용할 수 있습니다. order의 기본 값은 0이며, 양수나 음수로 바꿀 수 있습니다.**
Flex 요소의 순서를 지정합니다.
<integer> (... -1, 0 (default), 1, ...)align-self
는 개별 요소에 적용할 수 있는 또 다른 속성입니다. 이 속성은 align-items
가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용됩니다.
지정된 align-items 값을 무시하고 Flex 요소를 세로선 상에서 정렬합니다.
flex-start
flex-end
center
baseline
stretch
#pond {
display: flex;
align-items: flex-start;
}
.yellow { //5개중에 중앙것만 아래로이동 보통 중앙 개체가 중심이다.
align-self: flex-end;
}flex-wrap
한 줄 위에 비좁게 객체가 모여있을경우 다음의 값들을 인자로 받는 flex-wrap
속성을 사용하여 객체를 넓게 앉을 수 있도록 할수있다.
nowrap: 모든 요소들을 한 줄에 정렬합니다.wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.
⭐️참고해야할것
flex-fow : row wrap (두가지속성을 다르게 사용 가능)
flex-direction과 flex-wrap이 자주 같이 사용되기 때문에, flex-flow가 이를 대신할 수 있습니다. 이 속성은 공백문자를 이용하여 두 속성의 값들을 인자로 받습니다.
예를 들어, 요소들을 가로선 상의 여러줄에 걸쳐 정렬하기 위해 flex-flow: row wrap을 사용할 수 있습니다.
flex-flow
다음의 속성들을 간략히 한 속성입니다: flex-direction and flex-wrap
<flex-direction: > <flex-wrap: >align-content
개구리들이 연못의 사방에 퍼져있고, 수련잎은 연못의 위쪽에 모여있습니다. align-content
를 사용하여 여러 줄 사이의 간격을 지정할 수 있습니다. 이 속성은 다음의 값들을 인자로 받습니다:
flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.space-between: 여러 줄들 사이에 동일한 간격을 둡니다.space-around: 여러 줄들 주위에 동일한 간격을 둡니다.stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.
