728x90
- flex적용
display:flex;
- 방향 설정
flex-direction: row; /*→*/
flex-direction: column; /*↓*/
flex-direction: row_reverse; /*←*/
flex-direction: column-reverse; /*↑*/
- 줄넘김
flex-wrap: nowrap; /*줄안넘김*/
flex-wrap: wrap; /*밑으로 넘김*/
flex-wrap: wrap-reverse; /*위로 넘김*/
- 메인축 방향 결정
justify-content: flex-start; /*아이템들을 시작점으로 정렬 합니다.*/
justify-content: flex-end; /*아이템들을 끝점으로 정렬합니다.*/
justify-content: center; /*아이템들을 가운데로 정렬합니다.*/
justify-content: space-between; /*아이템들의 균일한 간격으로 만들어 줍니다*/
- 아이템 정렬
align-items: stretch; /*기본! 가득*/
align-items: center; /*가운데*/
align-items: start; /*시작지점*/
align-items: end; /*끝점*/
'언어 > HTML, CSS' 카테고리의 다른 글
[CSS]vh & vw (0) | 2022.04.22 |
---|