레이아웃02 : flex에 대해

웹 사이트의 레이아웃을 구성할 때 기본적으로 세로 구조로 구성됩니다.

레이아웃을 구성할 때 블록 구조는 수직으로 쌓이기 때문에 항상 사용됩니다.

그러나 실제로는 수평적 사용이 필요한 경우가 많다.

가로로 만들 수 있는 트레이트는 많지만 가장 많이 사용하는 트레이트라도 쓰임새가 다르기 때문에 자신에게 적합하고 편리한 트레이트를 사용하는 것이 좋습니다.
저번에 float에 대해 설명했다면 이번에는 flex에 대해 설명하고자 합니다.

'추천 관련글,

수영이 궁금하다??

https://jo0132.14

레이아웃: 플로트에 대해 알아봅시다!

블록 구조 태그는 기본적으로 세로로 배열되지만 float로 가로로 배열할 수도 있습니다.
레이아웃을 마무리할 때 필수 속성으로 설정했다가 끄는 방법도 있습니다.
1. 수영 선수 수영 선수

jo0132.tistory.com

쉬운 목차

플렉스란?

항목이 포함된 큰 상자에 flex를 선언하고 그 안에 있는 항목에 유연한 배치 속성을 할당하여 레이아웃을 설정합니다.

display: flex;
display: -webkit-flex;
display: -ms-flexbox;

위의 구문은 이 요소의 레이아웃이 Flex에서 디자인되었음을 선언하기 위한 것입니다.

Flex는 한 번에 세 가지 속성을 속성으로 선언할 수 있습니다.

구조: 플렉스: abc

플렉스: 10100px	1 : Flex-Grow (생략 불가)	0 : (기본값)
		1 : 모든 요소가 1이면 크기가 같음
		양수: 값이 클수록 늘어나며 공간이 충분하지 않으면 어떤 값도 의미가 없습니다.
	1 : 플렉스 수축(옵션)	공간이 부족하면 항목 크기를 조정할 수 없습니다.
		(기본값) – 자식이 너무 많아 컨테이너가 넘칠 경우 넘치지 않도록 스스로 관리한다.
		값이 높을수록 좁아집니다. 여전히 공간이 있으면 각 값은 의미가 없습니다.
	100px : 플렉스 베이스 (생략 가능)	자동: (기본값)
		50px,100px,… : 원하는 가로 크기를 지정합니다.

자식이 나열되는 방향을 나타내는 속성입니다.
부모에게 할당됩니다.

이 속성은 공간이 남아 있는 경우(예: flex-grow: 0인 경우) 자식을 가로로 정렬합니다.

속성 값	개체 설명
유연한 시작(기본값)	시작 시 정렬(일반적으로 플렉스 방향인 경우 왼쪽, 오른쪽: 라인 반전)
플렉스 엔드	끝에 정렬(보통 오른쪽, 플렉스 방향: 왼쪽 라인 반전
센터	가운데 정렬
공간	신이 옳다고 하다
주위의 공간	좌우 등거리

이 속성은 Flex 자식이 줄 바꿈하는 방법을 지정합니다.

flex-direction과 flex-wrap을 하나의 속성으로 나란히 사용할 수 있습니다.

이 속성은 자식 요소를 세로로 정렬합니다.

이 속성은 하위 요소의 순서를 변경합니다.
배치 순서를 지정합니다.

선택한 항목을 하위 항목 아래에 세로로만 재배치하는 속성입니다.

flex-wrap : 랩의 경우; 이 속성은 여러 줄을 세로로 정렬합니다.
선형 요소의 속성 값과 동일합니다.