[CSS] css flexbox 속성

align-items

-컨테이너 안에서 어떻게 모든 요소들을 정렬하는지 지정한다.

 

flex-start : 요소들을 컨테이너의 꼭대기로 정렬한다.

flex-end : 요소들을 컨테이너의 바닥으로 정렬한다.

center : 요소들을 컨테이너의 세로선 상의 가운데로 정렬한다.

baseline : 요소들을 컨테이너의 시작 위치에 정렬한다.

stretch : 요소들을 컨테이너에 맞도록 늘린다.

 

align-self

-개별 요소(특정 요소)에 적용할 수 있는 속성으로 align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용된다.

---

justify-content

flex-start : 요소들을 컨테이너의 왼쪽으로 정렬한다.

flex-end : 요소들을 컨테이너의 오른쪽으로 정렬한다.

center : 요소들을 컨테이너의 가운데로 정렬한다.

space-between : 요소들 사이에 동일한 간격을 둔다.

space-around : 요소들 주위에 동일한 간격을 둔다.

참고
flex의 방향이 column일 경우 justify-content의 방향은 세로로, align-items의 방향은 가로로 바뀐다.

---

flex-direction

row : 요소들을 텍스트의 방향과 동일하게 정렬한다.

row-reverse : 요소들을 텍스트의 반대 방향으로 정렬한다.

column : 요소들을 위에서 아래로 정렬한다.

column-reverse : 요소들을 아래에서 위로 정렬한다

---

flex-wrap

nowrap :  모든 요소들을 한 줄에 정렬한다.

wrap : 요소들을 여러 줄에 걸쳐 정렬한다.

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

 

참고
flex-direction과 flex-wrap이 자주 같이 사용되기 때문에 flex-flow가 이를 대신할 수 있다.
이 속성은 공백문자를 이용하여 속성의 값들을 인자로 받는다.
ex) flex-flow: row wrap;

---

align-content

- 여러 줄들 사이의 간격을 지정한다. 단, 한 줄만 있는 경우에는 효과를 보이지 않는다.

 

flex-start : 여러 줄들을 컨테이너의 꼭대기에 정렬한다.

flex-end : 여러 줄들을 컨테이너의 바닥에 정렬한다.

center : 여러 줄들을 세로선 상의 가운데에 정렬한다.

space-between : 여러 줄들 사이에 동일한 간격을 둔다.

space-around : 여러 줄들 주위에 동일한 간격을 둔다.

stretch : 여러 줄들을 컨테이너에 맞도록 늘린다.

---

order

- 요소의 순서를 정하는 속성

 

• 내용을 변경하지 않고 출력 순서만 바꾸고 싶을 때 사용한다.
• 기본 값은 0이며, 작은 값이 있는 요소부터 출력한다. 단, 값이 같다면 입력한 순서대로 출력된다.
• order 속성의 값은 음수와 양수로 바꿀 수 있다.
• 특정 요소를 앞으로 옮기고 싶을 때 유용하게 쓸 수 있다.