1. 플랙스&그리드
플랙스 예시
그리드 예시
2. 경로
* 플랙스
justify-content align-items flex-direction: column;justify-content : 가로의 간격이동 및 조정
align-items : 세로의 간격이동 및 조정
flex-direction : 박스를 세로로 보이게함
content는 여러 줄에 대한 설정 justify
Item은 한 줄에 대한 설정 justify
order는 하나의 박스 위치 이동
align-self는 개별 요소에 적용할 수 있는 또 다른 속성
flex-wrap
- nowrap: 모든 요소들을 한 줄에 정렬합니다.
- wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
- wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.
content는 여러 줄에 대한 설정
item은 한 줄에 대한 설정
* 그리드
grid-template-columns: auto auto auto auto auto;
또는
repeat (5, auto)
가로로 auto 개수에 맞춰 배치
row-gap : 10px;
column-gap : 10px;
- 가로,세로 가격을 수치로 조정
ㅇㅇ