[css] display: flex

display : flex; 

화면에 아이템을 배치하는 속성으로 부모컨테이너에 작성한다.

 

 

 

 

 

 

<flex를 정렬하기위해 부모에 적용하는 속성들>

 

배치방향설정

flex-dirextion

	flex-direction: row;
	/* flex-direction: column; */
	/* flex-direction: row-reverse; */
	/* flex-direction: column-reverse; */

 

- row(기본값)

행(가로)방향으로 배치

 

- row-reverse

역순으로 가로배치

 

- column

열(세로)방향으로 배치

- column-reverse

역순으로 세로배치

 

---

 

줄넘김

flex-wrap (화면영역에 넘칠경우 줄바꿈설정)

	flex-wrap: nowrap;
	/* flex-wrap: wrap; */
	/* flex-wrap: wrap-reverse; */

- nowrap(기본값)

줄바꿈이 없음

 

- wrap

줄바꿈을 하며 넘치는대로 아래로 떨어짐

 

- wrap-reverse

역순으로 배치하며 아래로 떨어짐

 

---

 

정렬속성

justify-content

	justify-content: flex-start;
	/* justify-content: flex-end; */
	/* justify-content: center; */
	/* justify-content: space-between; */
	/* justify-content: space-around; */
	/* justify-content: space-evenly; */

- flex-start(기본값)

기본배치

 

- flex-end

아이템을 끝점으로 정렬

 

- center

아이템을 가운데정렬

 

- space-between ***

아이템 사이를 균일하게 두며 정렬

 

- space-around

아이템의 둘레에 균일한간격 생성하며 정렬(마치 margin의 좌우같은..)

 

- space-evenly

space-around 와 달리 아이템사이간격과 양옆여백간격이 같게 정렬

 

---

 

수직방향정렬

align-items

	align-items: stretch;
	/* align-items: flex-start; */
	/* align-items: flex-end; */
	/* align-items: center; */
	/* align-items: baseline; */

- stretch

아이템이 높이값만큼 채워져 늘어난다.

 

- flex-start

아이템을 시작기준점으로 정렬

 

- flex-end

아이템을 끝으로 정렬

 

- center

아이템을 가운데정렬

 

- baseline

아이템을 텍스트 베이스라인 기준으로 정렬

 

 

---

 

 

****

justify-content: center;
align-item: center;

아이템 화면 중앙정렬 팁

****