[프론트엔드][CSS] TIL Day-13.1 Flex 플렉스(Flexible Box layout)

 CSS Flexbox는 기존의 float, position, display 속성을 사용해 HTML 요소의 배치, 정렬, 방향, 순서, 크기를 조절하는 대신에

좀 더 쉽고 효율적으로 조절할 수 있도록 하는 CSS3 레이아웃 제작 방식이다. 

 

 ∨ 사용해서 좋은 점?

 -  float속성을 사용하지 않고 가로배치할 수 있다.

 -  반응형 레이아웃을 만들기 쉽다.

 -  자식요소의 위치 잡기를 훨씬 쉽게 할 수 있다.

 -  브라우저에 보여지는 HTML 요소의 순서를 HTML 코드를 수정하지 않고 바꾸는 게 가능하다.

 

 문서의 영역 중에서 Flexbox가 놓여있는 영역을 Flex 컨테이너(container)라고 한다.

 Flex 컨테이너를 생성하려면 컨테이너 요소의 display 값을 flex 혹은 inline-flex로 지정한다.

 이렇게 지정된 컨테이너의 일차 자식(direct children)요소가 Flex 항목(item)이 된다.

 

 

 

플렉스 컨테이너는 다음과 같은 속성들이 기본 값으로 지정된다.

 

1. 항목은 주축의 시작 끄트머리(시작점)에서 시작한다. 
2. 항목은 교차축의 크기를 채우기 위해 늘어난다.
3. 항목은 주(main) 차원(dimension) 위에서 늘어나지는 않지만 줄어들 수 있다. 즉, 컨테이너 안의 항목들은 브라우저창을 줄이면 같이 줄어들지만, 그 창이 커지면 지정한 값 그 이상으로 늘어나지는 않는다.
4. flex-direction : row;  항목(item)은 행(row)으로 나열된다.
5. flex-basis : auto; 컨텐츠(항목 안의 내용)에 맞게 크기가 자연스럽게 정해진다.
6. flex-wrap: nowrap; 컨테이너 안의 항목들이 많아져도 한줄을 유지한다. (줄바꿈하지 않는다.)

 - 여기서 주축과 교차축이란?

    주축(main axis)은  flex-direction 속성으로 정의되는데, 4개의 값을 가질 수 있다.

    ; row, row-reverse, column, column-reverse

    이 때 따로 속성을 통하여 주축을 정하지 않는다면, 기본값은 row이다.

    교차축은 주축의 수직인 축(cross axis)을 이야기하는 것이다.   

<row나 row-reverse는 주축이 옆으로 향하는 인라인 방향>

<column이나 column-reverse는 주축이 하단으로 향하는 블록방향>

 

※ flexbox는 텍스트가 반드시 문서의 왼쪽 상단에서 시작해 오른쪽으로 향한다거나 새 라인이 항상 아래에 쌓인다고 가정하지도 않는다. 따라서 flex 요소의 정렬 방향에 '왼쪽, 오른쪽, 위, 아래'를 사용하지 않는다. 텍스트를 쓸 때 왼쪽에서 오른쪽인 것이 아니라, 언어(언어마다 다르게 기술되는 방식)에 따라 시작선과 끝선이 달라질 수 있다.

 

 플렉스 항목들은 각 항목 별 내부 요소의 크기로 주축을 따라 정렬된다. 컨테이너의 크기보다 더 많은 항목이 있을 경우 행을 바꾸지 않고 주축 방향으로 흘러 넘치게 된다(no wrap). 어떤 항목이 다른 항목보다 높이 값이 크다면 나머지 모든 항목들은 그에 맞게 교차축을 따라 늘어나게 된다.

 

 

<Flex Box 부모요소, 자식요소의 속성과 속성값>

 

	역할	속성	설명		속성값	설명
플렉스 컨테이너 (부모요소)에서 쓰는 속성	플렉스 항목들을 아우르는 전체 레이아웃 적용	display	배치할 웹 요소들을 감싸는 부모요소를 플렉스 컨테이너로 만듬.		flex	컨테이너 안 플렉스 항목을 블록 레벨 요소로 배치
					inline-flex	컨테이너 안 플렉스 항목을 인라인 레벨 요소로 배치
	플렉스 항목박스들을 배치하는 방법	justify- content	주축 방향으로 플렉스 항목 간의 정렬 방법을 지정함.		flex-start	주축의 시작점에 맞춰 배치
					flex-end	주축의 끝점에 맞춰 배치
					center	주축의 중앙에 맞춰 배치
					space- between	첫 번째 항목과 끝 항목을 주축의 시작점과 끝점에 배치, 나머지는 그 사이에  동일한 간격으로 배치
					space- around	모든 항목을 주축에서 같은 간격으로 배치
					space- evenly	space-around와 마찬가지로 주축에서 같은 간격으로 배치하나, 첫 번째 항목의 앞과 끝 항목의 뒤 여백까지 항목 간 간격과 동일하게 배치
		align-items	justify-content와 같이 항목 간의 정렬 방법을 지정하는 것이지만, 교차축 방향으로 정렬하는 것이 차이임.		flex-start	교차축의 시작점에 맞춰 배치
					flex-end	교차축의 끝점에 맞춰 배치
					center	교차축의 중앙에 배치
					baseline	교차축의 문자 기준선에 맞춰 배치
					stretch	플렉스 항목을 늘려 교차축에 가득 차게 배치
		align- content	교차축에서 여러 줄로 표시된 항목의 정렬 방법임, 속성값들은 justify-content(주축방향)가 가질 수 있는 모든 속성값에 align-items(교차축방향)의 stertch라는 속성값만 추가된 것으로 기억하면 됨.		flex-start	교차축의 시작점에 맞춰 배치
					flex-end	교차축의 끝점에 맞춰 배치
					center	교차축의 중앙에 배치
					space- between	첫 번째 항목과 끝 항목을 교차축의 시작점과 끝점에 배치, 나머지는 그 사이에  동일한 간격으로 배치
					space- around	항목들을 교차축에서 같은 간격으로 배치, 단 첫 번째 항목의 앞여백과 끝 항목의 뒤 여백은 항목 간 간격의 절반 크기로 해서 배치
					space- evenly	space-around와 마찬가지로 교차축에서 같은 간격으로 배치하나, 첫 번째 항목의 앞 여백과 끝 항목의 뒤 여백까지 항목 간 간격과 동일하게 배치
					stretch	플렉스 항목을 늘려 교차축에 가득 차게 배치
	플레스 컨테이너의 주축과 방향을 지정	flex-direction	플렉스 컨테이너 안에서 플레스 항목을 배치할 주축과 방향을 지정함.		row(기본값)	주축을 가로로 지정, 왼쪽에서 오른쪽으로 배치
					row-reverse	주축을 가로로 지정, 오른쪽에서 왼쪽으로 배치(역방향)
					column	주축을 세로로 지정, 위쪽에서 아래쪽으로 배치
					column -reverse	주축을 세로로 지정, 아래쪽에서 위쪽으로 배치(역방향)
	플렉스 컨테이너 내의 플렉스 항목의 줄바꿈	flex-wrap	플렉스 컨테이너 너비보다 많은 플렉스 항목이 있을 경우 줄을 바꿀지(컨테이너 안의 항목이 한 줄에 많아져 흘러넘치게 될 때 여러 줄로 만들지)를 지정함.		nowrap(기본)	플렉스 항목을 한 줄에 표시
					wrap	플렉스 항목을 여러줄에 표시
					wrap-reverse	플렉스 항목을 여러줄에 표시하면서 시작점과 끝점이 바뀜
플렉스 항목들 (자식요소)에서 쓰는 속성	플렉스 항목 하나를 개별적으로 배치하는 방법	align-self	플렉스 박스에서 특정 항목만 정렬 방법을 지정함. align-item의 속성값과 동일한 속성값을 갖는다. 다른 점은 항목들의 정렬 방법이 아니라, 항목 각자 하나에 대해 지정할 때는 align-self을 이용하는 것.		flex-start	align-item의 속성값과 동일
					flex-end	align-item의 속성값과 동일
					center	align-item의 속성값과 동일
					baseline	align-item의 속성값과 동일
					stretch	align-item의 속성값과 동일
	flex-grow, flex-shrink, flex-basis의 속성을 한 번에 쓸 수 있는 단축 속성	flex	앞의 세 속성은 관련이 깊기에, flex라는 축약형을 쓰는 것이 편함.		숫자(정수)	flex: 1; = flex-grow: 1;  flex: 1 500px; = flex-grow: 1;  flex-basis: 500px; flex: 1 1; = flex-grow: 1;  flex-shrink: 1; flex: 1 1 auto; = flex-grow: 1; flex-shrink: 1; flex-basis: auto;                <MDN사이트 참조>
	플렉스 항목들의 너비 증가비율을 지정	flex-grow	각 플렉스 항목들이 전체에 있어 얼마 비율로 유지하며 커질지를 지정함.		숫자(정수) 0(기본값)	.child1{flex-grow: 1;}은 전체의 1/4차지하며 커짐 .child2{flex-grow: 2;}은 전체의 1/2차지하며 커짐 .child3{flex-grow: 1;}은 전체의 1/4차지하며 커짐
	플렉스 항목들의 너비 감소비율을 지정	flex-shrink	각 플렉스 항목들이 전체에 있어 얼마 비율로 유지하며 줄어들지를 지정함. 다만, 계산이 복잡해 실전에서 활용도는 많이 떨어짐.		숫자(정수) 1(기본값)	.child1{flex-shrink: 3;}은 전체의 1/2차지하며 작아짐 .child2{flex-shrink: 2;}은 전체의 1/3차지하며 작아짐 .child3{flex-shrink: 1;}은 전체의 1/6차지하며 작아짐
	플렉스 항목들을 공간 배분 하기 전 항목의 기본 너비를 설정	flex-basis	플렉스 항목의 기본 크기를 설정함. flex-direction이 row일 때는 너비의, column일 때는 높이의 크기가 됨.		숫자(정수) auto(기본값)	.item{flex-basis: 100px;}라고 지정하면, 100px 이하의 컨텐츠는 100px의 사이즈를 유지하고, 그것을 넘어가는 컨텐츠는 컨텐츠 크기에 맞게 늘어남.
	플렉스 항목들의 순서를 강제로 설정	order	order 속성을 주지 않으면 기본값 0이 주어지고, 1번째 순서임.		숫자(정수) 0(기본값)	order: 1;은 2번째 순서로 배치됨 order: 2;은 3번째 순서로 배치됨
	자신 외 타 항목들을 반대방향으로 밀어내 양쪽 끝에 배치	margin	margin 속성을 auto로 설정해서 자기를 제외한 항목들을 반대방향으로 밀어내 왼쪽 끝이나 오른쪽 끝에 배치함.(마진 오토를 한 항목에 적용시)		auto	단, .child1, .child2, .child3 {margin: auto;}으로 동시에 여러항목에 마진 오토를 지정한다면 서로에게 균등하게 마진을 줘서 떨어짐. 이때, 균등하게 서로 마진을 가지면서 양끝의 항목들이 공간의 양끝으로 배치 안될 수도 있음
		margin-right
		margin-left

 

<플렉스 컨네이너 안에서 항목들을 정렬할 때 - 주축방향/ 교차축방향에 따라 지정할 속성 이름>