[CSS] DIV 설정(2)

display는 Flex Container를 정의하며(flex box)
container는 item을 감싸는 부모이며 item은 자식이다.
컨테이너와 아이템에 적용하는 속성은 구분되어 있다.

🍒 배치정렬 속성 정의하는방법

justify-content 가로정렬 속성 설정하기

display : flex;
부모요소에 선언후
justify-content : 속성;
선언후 속성 설정

flex-start; 컨테이너의 왼쪽으로 정렬
flex-end; 컨테이너의 오른쪽으로 정렬
center; 컨테이너 가운데로 정렬
space-between; 시작 요소는시작점, 마지막 요소는 마지막에 정렬되고 그사이 요소들 사이에 동일간격 정렬
space-around; 요소간 균등한여백 정렬

align-content 세로정렬 속성 설정하기

( ㄴ content와 item을 잘 구분하자)

display: flex
부모요소에 선언후
align-content : 속성;
선언 후 속성 설정

align-content: start; 컨테이너 위 시작점에 위치
align-content: center; 컨테이너 정중앙에 위치
align-content: space-between; 시작점과 마지막점에 위치한후 중간 공백 거리가 동일하게 요소들이 위치
align-content: space-around; 요소간 균등한 공백
align-self; 클래스 지정후 개별요소에 적용할 수 있는 속성이다 (align-items; 값들을 인자로 받는다)

❔align-items와 content 차이점?

items는 요소를 정렬하고 content는 컨테이너 라인을 정렬한다