Flex
| 개구리로 배우는 flex |
* CSS 속성들을 사용하여 개구리들이 집으로 돌아갈 수 있도록 됴와주세요:
justify-content
align-items
flex-direction
order
align-self
flex-wrap
flex-flow
align-content
속성 : 인자;
1 flex-direction
이 CSS 속성은 다음의 값들을 인자로 받아 컨테이너 안에서 요소들이 정렬해야 할 방향을 지정합니다:
row: 요소들을 텍스트의 방향과 동일하게 정렬합니다. (기본값) s--->e
row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다. e<---s
column: 요소들을 위에서 아래로 정렬합니다.
column-reverse: 요소들을 아래에서 위로 정렬합니다.
1 justify-content: 이 속성은 다음의 값들을 인자로 받아 요소들을 가로선 상에서 정렬
flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. (리버스일때 우쪽)
flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.(리버스일때 좌쪽)
center: 요소들을 컨테이너의 가운데로 정렬합니다.
space-between: 요소들 사이에 동일한 간격을 둡니다.(양끝에 딱 붙기)
space-around: 요소들 주위에 동일한 간격을 둡니다.(양끝에선 살짝 떼기)
(요소로 균등해서 그곳에서 가운데에 위치함.)
2 align-content를 사용하여 세로선 상에서 정렬 여러 줄 사이의 간격을 지정할 수 있습니다.
이 속성은 다음의 값들을 인자로 받습니다:
flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.
align-content는 여러 줄들 사이의 간격을 지정하며,
align-items는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는지를 지정합니다.
center해도 아이템스는 띄어서 붙고 컨텐츠는 딱 붙고???
한 줄만 있는 경우, align-content는 효과를 보이지 않습니다. ()
개구리들이 한 줄 위에 비좁게 앉아있네요.
다음의 값들을 인자로 받는 flex-wrap 속성을 사용하여 개구리들이 넓게 앉을 수 있도록 해주세요:
nowrap: 모든 요소들을 한 줄에 정렬합니다.
wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.
flex-direction과 flex-wrap이 자주 같이 사용되기 때문에,
flex-flow가 이를 대신할 수 있습니다.
이 속성은 공백문자를 이용하여 두 속성의 값들을 인자로 받습니다.
예를 들어, 요소들을 가로선 상의 여러줄에 걸쳐 정렬하기 위해
flex-flow: row wrap을 사용할 수 있습니다.
flex-flow: column wrap;
flex-direction:
flex-direction:column-reverse;
flex-direction:row-reverse;
align-items
align-items:flex-end;
align-self
justify-content:
justify-content:space-between;
flex-flow:column-reverse wrap-reverse; 동시에 쓸수 있다.
flex-wrap:wrap-reverse;
flex-direction:column-reverse;
justify-content:center;
align-content:space-between;