float < flexbox
How to use it
4steps
(1)플렉스 박스 쓴다(선언)
-display: flex;(부모한테 주는 값)
(2)가로 정렬? 세로 정렬?
-flex-direction: row/row-reverse/column/column-reverse
-상황에 따라 main-axis와 cross-axis 구분할 것
(reverse의 경우 main만 반대로 변화)
(3)무조건 한 줄 안에 다 정렬?
-flex-wrap:nowrap; --> 사이즈 줄여서 라도 한 줄로 정렬
-flex-wrap:wrap;--> 공간이 넉넉치 않으면 여러 줄 만듦
(4)플렉스 박스 정렬 타임
※ align-items와 align-content
꿀팁! 일단 align-items 사용해보고 안되면 align-content 사용해보기!
(align-content 'flex-wrap:wrap'인 상태에서 사용 가능)
'CSS' 카테고리의 다른 글
| [CSS] Flex 간단한 실습하기 (0) | 2022.02.01 |
|---|---|
| [CSS] media query 알아보기 (0) | 2022.02.01 |
| [CSS] position 실습하면 배운 것 (0) | 2022.02.01 |
| [CSS] position 알아보기 (0) | 2022.02.01 |
| [CSS] Box Model (0) | 2022.02.01 |
