flex 공부

flex : 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성.

 

justify-content의 속성들  :  -수평정렬 관련, 간격과 관련있다.

 

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

align-items의 속성들 : - 수직정렬 관련

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

 

flex-direction 속성들: -요소들의 순서 관련, 수직, 수평정렬 둘다 가능

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

column-reverse 또는 row-reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀐다.

Flex의 방향이 column일 경우 justify-content의 방향이 세로로, align-items의 뱡향이 가로로 바뀐다.

 

order : 개별요소의 순서를 특별하게 지정하고 싶을때, 클래스를 이용해 지정하면 좋다.order=1로 하면 현재 자신의 위치보다 한단계 다음요소로 이동한다. default = 0

 

align-self : 개별요소에 적용할 수 있는 속성, align-items가 사용하는 값들을 인자로 받는다.

 

flex-wrap: 

• now-wrap : 모든 요소들을 한줄에 정렬한다.
• wrap : 요소들을 여러줄에 걸쳐 정렬한다. -원사이즈에 맞게 할수있게 도와줌
• wrap-reverse:요소들을 여러줄에 걸쳐 반대로 정렬한다.

 

 

flex-flow:  - flex-wrap과 flex-direction은 자주 같이 사용되기 때문에 하나로 축약한것(숏컷)

공백 문자를 이용하여 두 속성들의 값을 인자로 받는다.

flex-flow: row wrap; 처럼

 

align-content : 여러줄 사이의 간격을 지정할 수 있다.

 

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

*align-items는 컨테이너 '안'에서 어떻게 모든 요소들이 정렬할지를 결정하고

align-content는 여러 '줄'들 사이의 간격을 지정한다.

 

 

flex를 배우는데 도움이 됐던 사이트를 소개한다.

 

https://flexboxfroggy.com/#ko << 여기서 개구리들을 연습하면서 flex와 정렬에 대한 감을 잡을수 있었다.

땡큐  Flexbox Froggy!