flex
: 본인은 display : block
처럼 작동flex-start
: 요소들을 컨테이너의 왼쪽으로 정렬합니다.flex-end
: 요소들을 컨테이너의 오른쪽으로 정렬합니다.center
: 요소들을 컨테이너의 가운데로 정렬합니다.space-between
: 요소들 사이에 동일한 간격을 둡니다.space-around
: 요소들 주위에 동일한 간격을 둡니다.flex-start
: 요소들을 컨테이너의 꼭대기로 정렬합니다.flex-end
: 요소들을 컨테이너의 바닥으로 정렬합니다.center
: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.baseline
: 요소들을 컨테이너의 시작 위치에 정렬합니다.stretch
: 요소들을 컨테이너에 맞도록 늘립니다.row
: 요소들을 텍스트의 방향과 동일하게 정렬합니다.row-reverse
: 요소들을 텍스트의 반대 방향으로 정렬합니다.column
: 요소들을 위에서 아래로 정렬합니다.column-reverse
: 요소들을 아래에서 위로 정렬합니다.특정 item 의 순서를 바꿀 수 있음
yellow 를 3번째로 보내는 코드
음수도 사용할 수 있다.
#pond {
display: flex;
}
.yellow {
order: 3;
}
nowrap
: 모든 요소들을 한 줄에 정렬합니다.wrap
: 요소들을 여러 줄에 걸쳐 정렬합니다.wrap-reverse
: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.flex-start
: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.flex-end
: 여러 줄들을 컨테이너의 바닥에 정렬합니다.center
: 여러 줄들을 세로선 상의 가운데에 정렬합니다.space-between
: 여러 줄들 사이에 동일한 간격을 둡니다.space-around
: 여러 줄들 주위에 동일한 간격을 둡니다.stretch
: 여러 줄들을 컨테이너에 맞도록 늘립니다.block
: 너비 최대, 수직 배열inline-block
: 너비 최소, 수평 배열static
: 부모 tag 에 고정적으로 위치해야 함absolute
: 부모 tag 내에서 자유롭게 위치할 수 있음