sm 기술 블로그
[CSS] flex 명령어 본문
justify-content (flex요소들을 가로선 상에서 정렬)
- flex-start : 왼쪽으로 정렬 - default
- flex-end : 오른쪽으로 정렬
- center : 가로선 상 가운데로 정렬
- space-between : 요소들 사이의 간격을 동일하게 둔다.
- space-around : 요소들 주의에 동일한 간격을 둔다.
align-items (flex요소들을 세로선 상에서 정렬)
- flex-start: 꼭대기로 정렬
- flex-end: 바닥으로 정렬
- center: 세로선 상 가운데로 정렬
- baseline: 컨테이너(담은 곳)시작 위치에 정렬
- stretch: 컨테이너(담은 곳)에 맞도록 늘림 - default
flex-direction (정렬할 방향을 정함)
- row: 텍스트 방향(가로)으로 정렬 - default
- row-reverse: row의 반대로 정렬
- column: 위아래 방향(세로)으로 정렬
- column-reverse: column의 반대로 정렬
방향을 바꾸면 justify와 align 도 바뀜 => 세로선 justify, 가로선 align
order (요소의 순서를 지정)
-n ~ n
align-self (items의 영향을 받지않고 개별로 요소를 적용시킴)
flex-wrap (flex요소들을 한 줄 또는 여러 줄에 걸쳐 정렬)
- nowrap: 모든 요소들을 한 줄에 정렬 - defalut
- wrap: 요소들을 여러 줄에 걸쳐 정렬
- wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬
flex-flow (flex-direction + flex-wrap을 합침)
- flex-direction명령어 flex-wrap명령어
align-content (줄 사이의 간격을 지정)
- flex-start: 여러 줄들을 컨테이너 꼭대기에 정렬
- flex-end: 여러 줄들을 컨테이너 바닥에 정렬
- center: 어러 줄들을 세로선 상의 가운데에 정렬
- space-between: 어러 줄들의 사이에 동일한 간격을둠
- space-around: 여러 줄들 주위에 동일한 간격을 둠
- stretch: 여러 줄들을 컨테이너에 맞도록 늘림
연습 사이트
개구리 : https://flexboxfroggy.com/#ko
디펜스 : http://www.flexboxdefense.com/
'CSS & HTML' 카테고리의 다른 글
tailwind) 모달 프레임워크 (0) | 2022.09.26 |
---|---|
CSS 포지션 속성 : absolute , fixed, realtive (0) | 2022.09.25 |
[프론트엔드] 메인페이지 (0) | 2022.07.15 |
기본값, 폰트 꾸미기 (0) | 2022.05.31 |
[CSS] 화면 꾸미기 (+리액트) (0) | 2022.05.26 |
Comments