반응형
display: flex;
justify-content
- flex-start : 요소들을 컨테이너의 왼쪽으로 정렬 (start -> flex-start로 변경됨)
- flex-end : 요소들을 컨테이너의 오른쪽으로 정렬 (end -> flex-end로 변경됨)
- center : 요소들을 컨테이너의 가운데로 정렬
- space-between : 요소들 사이 동일 간격으로 두기
- space-around : 요소들 주위에 동일한 간격으로 두기
align-items
- flex-start : 요소들을 컨테이너의 꼭대기로 정렬
- flex-end : 요소들을 컨테이너의 바닥으로 정렬
- center : 요소들을 컨테이너의 세로선 상 가운데로 정렬
- baseline : 요소들을 컨테이너 시작 위치에 정렬
- stretch : 요소들을 컨테이너에 맞도록 늘리기
flex-direction
- row : 요소들을 텍스트의 방향과 동일하게 정렬
- row-reverse : 요소들을 텍스트의 반대 방향으로 정렬
- column : 요소들을 위에서 아래로 정렬
- column-reverse : 요소들을 아래에서 위로 정렬
order
- default value: 0
- 각 요소에 음수/양수를 주어 순서를 변경할 수 있음
align-self
- 개별 요소에 적용할 수 있는 또 다른 속성
- align-items와 동일한 값들을 지정한 요소에만 적용할 수 있음
flex-wrap
- nowrap : 모든 요소들을 한 줄에 정렬
- wrap : 요소들을 여러 줄에 걸쳐 정렬
- wrap-reverse : 요소들을 여러 줄에 걸쳐 반대로 정렬
flex-flow
flex-flow: flex-direction flex-wrap;
- flex-direction과 flex-wrap를 줄여서 함께 사용 가능 (자주 같이 사용되기 때문)
- (ex) flex-flow: column wraps;
align-content
- flex-start : 여러 줄들을 컨테이너의 꼭대기에 정렬
- flex-end : 여러 줄들을 컨테이너의 바닥에 정렬
- center : 여러 줄들을 세로선 상의 가운데에 정렬
- space-between : 여러 줄들 사이 동일 간격으로 둠
- space-around : 여러 줄 주위에 동일한 간격으로 둠
- stretch : 여러 줄들을 컨테이너에 맞도록 늘림
Answer
- justify-content: flex-end;
- justify-content: center;
- justify-content: space-around;
- justify-content: space-between;
- align-items: flex-end;
- justify-content:center;
align-items:center; - justify-content: space-around;
align-items: flex-end; - flex-direction: row-reverse;
- flex-direction: column;
- flex-direction: row-reverse;
justify-content: flex-end; - flex-direction: column;
justify-content: end; - flex-direction: column-reverse;
justify-content: space-between; - flex-direction: row-reverse;
justify-content: center;
align-items: flex-end; - order: 1;
- order: -1;
- align-self: flex-end;
- order: 1;
align-self:flex-end; - flex-wrap: wrap;
- flex-direction: column;
flex-wrap: wrap; - flex-flow: column wrap;
- align-content: flex-start;
- align-content: flex-end;
- flex-direction: column-reverse;
align-content:center; - flex-direction: column-reverse;
flex-wrap: wrap-reverse;
justify-content: center;
align-content: space-between;
예~ 모든 개구리들을 수련 위에 안전하게 이동했다!
반응형
'Front-End: Web' 카테고리의 다른 글
axios interceptors (0) | 2023.07.22 |
---|---|
[CSS] Grid Garden - grid 속성을 배워보자 (0) | 2022.11.15 |
Incognito Mode란? (+Next.js에서 query 값이 아직 없을 때) (0) | 2022.10.06 |
폴더 정리 (0) | 2022.07.19 |
[CSS] 두 요소 겹치기: 부모 relative + 자식 absolute (0) | 2022.02.23 |