flex 정리

Flex란?

레이아웃 배치 전용 기능으로 고안된 Css

flex의 구조

<div class="container"> 	<!-- 부모(컨테이너) -->
   
   <div class="item">1</div> 	<!--  자식(아이템)  -->
   <div class="item">2</div>	<!--  자식(아이템)  -->
   <div class="item">3</div>	<!--  자식(아이템)  -->
   <div class="item">4</div>	<!--  자식(아이템)  -->
   <div class="item">5</div>	<!--  자식(아이템)  -->

</div>

flex는 부모와 자식으로 나뉘는데 부모는 flex container, 자식은 flex item이라고 부른다. flex를 설정하면 전체 컨테이너 범위에 영향을 주고 속성에 따라 자식들이 배치된다.

flex 부모에 적용하는 속성

flex는 부모와 자식에게 적용하는 속성이 다르다.

1. display : flex

.container {
	display: flex;
}

아이템들이 가로로 설정된다.

2. flex-direction

.container {
	flex-direction: row;		/* 행(가로) 방향으로 배치 [default] */
	flex-direction: column; 	/* 열(세로) 방향으로 배치 */
	flex-direction: row-reverse; 	/* 역순으로 행(가로) 방향으로 배치 */
	flex-direction: column-reverse; /* 역순으로 열(세로) 방향으로 배치 */
}

아이템들이 어떤 방향으로 배치 될 것인가.

3. flex-wrap

.container {
	flex-wrap: nowrap; 		/* 줄 바꿈 X [default]*/
	flex-wrap: wrap; 		/* 줄 바꿈 O*/
	flex-wrap: wrap-reverse; 	/* 역순으로 줄 바꿈 O */
}

컨테이너 안의 아이템이 넘칠때, 아이템의 줄을 어떻게 할지 결정한다.

4. flex-flow

2,3의 속성인 flex-direction, flex-wrap을 한번에 적용한다.

5. justify-content

.container {
	justify-content: flex-start;		/* 아이템들을 시작지점으로 정렬 */
	 justify-content: flex-end; 		/* 아이템들을 끝점으로 정렬 */
	 justify-content: center; 		/* 아이템들을 가운데로 정렬 */
	 justify-content: space-between; 	/* 아이템들 사이(between)에 균일한 간격을 만듬 */
	 justify-content: space-around; 	/* 아이템들의 둘레(arround)에 균일한 간격을 만듬 */
	 justify-content: space-evenly; 	/* 아이템들의 사이와 양 끝에 균일한 간격을 만듬 */
}

아이템의 가로 정렬

6. align-items

.container {
	 align-items: stretch;		/* 아이템들이 수직축 방향으로 끝까지 늘어남 [default] */
	 align-items: flex-start; 	/* 아이템들을 시작지점으로 정렬 */
	 align-items: flex-end; 	/* 아이템들을 끝점으로 정렬 */
	 align-items: center; 		/* 아이템들을 가운데로 정렬 */
	 align-items: baseline; 	/* 아이템들을 텍스트 베이스라인 기준으로 정렬 */
}

아이템 세로 정렬

flex 자식에 적용하는 속성

1. flex-basis

아이템의 기본 크기

2. flex-grow

아이템 여백 비율(flex-basis를 제외한 여백)

3. flex-shrink

flex-basis의 값보다 작아질 수 있는 지 여부
0일때는 플렉스 아이템은 축소되지않고 주변 상황에 따라 크기가 늘어나는 경우가 있다.

4.align-self

.item {
	 align-self: auto; 		/* */
	 align-self: stretch; 		/* */
	 align-self: flex-start; 	/* */
	 align-self: flex-end; 		/* */
	 align-self: center; 		/* */
	 align-self: baseline; 		/* */
}

해당 아이템의 개별 세로 정렬

5. order

.item:nth-child(1) {
	order: 2;
}
.item:nth-child(2) {
	order: 3;
}
.item:nth-child(3) {
	order: 1;
}

아이템의 순서를 바꿔준다.

해당 코드들 예제 첨부.
공부할 수 있는 게임도 있다.