flex
정렬 할 요소들의 부모 요소에 display: flex를 선언하여 요소들을 정렬하는데 사용.
첫번째 자식에 해당하는 요소에만 flex가 적용된다.
flex 속성
justify-content
- flex-start : 요소들을 컨테이너의 왼쪽으로 정렬
- flex-end : 요소들을 컨테이너의 오른쪽으로 정렬
- center : 요소들을 컨테이너의 가운데로 정렬
- space-between : 요소들 사이에 동일한 간격을 둔 상태로 정렬
- space-around : 요소들 주위에 동일한 간격을 둔 상태로 정렬
align-items
- flex-start : 요소들을 컨테이너의 꼭대기로 정렬
- flex-end : 요소들을 컨테이너의 바닥으로 정렬
- center : 요소들을 컨테이너의 세로선 상의 가운데로 정렬
- baseline : 요소들을 컨테이너의 시작 위치에 정렬
- stretch : 요소들을 컨테이너에 맞도록 늘린다
flex-direction
- row : 요소들을 텍스트의 방향과 동일하게 정렬
- row-reverse : 요소들을 텍스트의 반대 방향으로 정렬
- column : 요소들을 위에서 아래로 정렬
- column-reverse : 요소들을 아래에서 위로 정렬
학습하면서 관련내용 계속 추가 중...
이러한 flex의 속성들을 재미있게 학습해볼 수 있는 사이트가 있다
⭐⭐개구리 잡아서 flex 마스터⭐⭐
Today I Learned