플렉스박스& 플렉스

Flex를 더 잘 이해하려면 Flex-Box가 무엇인지 알아야 합니다.

Flex-box: CSS3의 새로운 레이아웃 모드입니다. 이 레이아웃은 요소가 서로 다른 디스플레이 크기 및 디스플레이 장치에 상대적으로 동작하도록 합니다.

Flex-box에는 Flex-Container 및 Flex-Item이 있습니다.
Flex-container는 부모의 속성을 지정합니다. flex 또는 inline-flex의 display 속성을 설정하여 선언합니다.
플렉스 아이템은 하위 속성을 지정합니다. 이들은 플렉스 컨테이너 내부에 있습니다.

플렉스 항목은 기본적으로 수평 플렉스 라인을 따라 설정됩니다.
이들은 주로 플렉스 컨테이너의 플렉스 항목을 정렬하는 두 개의 축입니다. 주축과 교차축입니다. 이들은 서로 수직입니다.
주축은 굴곡선을 따라 있습니다. 축선은 수평이고 그 반대도 마찬가지입니다.

플렉스박스 속성:-

표시 => HTML ELement에 사용되는 상자 유형을 지정하는 데 사용됩니다.
Flex-Direction => 플렉스 항목의 축선을 지정하려면
Justify-Content => 항목이 기본 축에서 사용 가능한 모든 공간을 사용하지 않은 경우 항목을 가로로 정렬합니다.
항목 정렬 => 항목이 교차 축에서 사용 가능한 모든 공간을 사용하지 않은 경우 항목을 세로로 정렬합니다.
Flex-Wrap => 컨테이너에 플렉스 항목을 위한 공간이 충분하지 않은 경우 플렉스 항목을 래핑할지 여부를 지정합니다.
Align-Content => 플렉스 라인을 정렬합니다. 플렉스 랩 속성을 수정하는 데 사용됩니다.
Flex-Flow => Flex Direction 및 Flex Wrap에 대한 속기 속성을 지정합니다.
Order => 동일한 컨테이너에 있는 다른 플렉스 항목에 상대적인 플렉스 항목의 순서를 지정합니다.
ALign-Self => 컨테이너의 항목 정렬 속성을 재정의하는 플렉스 항목에 사용됩니다.

그 다음에,
플렉스 속성은 플렉스 아이템에서만 작동하며, 플렉스 아이템의 길이를 설정하는 데 사용됩니다. 플렉스 아이템의 길이는 플렉스 증가, 플렉스 축소, 플렉스 기준에 따라 다릅니다.
우리는 간단히 flex가 이 세 가지 속성의 줄임말이라고 말할 수 있습니다.

"플렉스 발1 발2 발3"

val1은 플렉스 증가를 나타냅니다. 단위가 없는 양수이며 다른 플렉스 항목에 비해 플렉스 항목의 크기가 얼마나 커야 하는지 지정합니다.
val2는 플렉스 축소를 의미합니다. 단위가 없는 양수이며 플렉스 항목이 다른 플렉스 항목에 비해 얼마나 축소되어야 하는지를 지정합니다.
val3은 플렉스 기준을 나타내며 플렉스 항목이 늘어나거나 줄어들기 시작하는 위치에서 플렉스 항목의 초기 길이를 지정합니다.

                         --Thank You--