간단한 초보자 단계: CSS Flexbox!

CSS에서 가장 다재다능한 모듈 중 하나인 flexbox의 기본 사항에 대해 이야기해 봅시다!

flexbox에는 상위 요소('유연한' 컨테이너)와 하위 요소(플렉스 항목)의 두 가지 요소가 있습니다. 공간의 크기를 알 수 없거나 동적인 경우에도 형식을 지정하고 레이아웃을 지정하고 구성할 수 있기 때문에 놀라울 정도로 다재다능합니다!

상위 속성:

1. 디스플레이 이것은 플렉스 컨테이너를 정의할 빌딩 블록입니다.

.container {
  display: flex;
}

2. flex-direction 이것은 flexbox 부모가 확장되는 축과 해당 축의 방향을 지정합니다.
행: 왼쪽에서 오른쪽으로
행 반전: 오른쪽에서 왼쪽으로
열: 북쪽에서 남쪽으로
열 역방향: 남쪽에서 북쪽으로

.container {
  flex-direction: row (OR) row-reverse (OR) column (OR) column-reverse;
}

3. flex-wrap Flexbox는 항상 항목을 한 줄에 맞추려고 합니다. 이 속성을 사용하면 새 줄로 줄바꿈할 수 있습니다.
nowrap: 모두 한 줄에
wrap: 여러 줄로 줄 바꿈(위에서 아래로)
wrap-reverse: 여러 줄(아래에서 위로)

.container {
  flex-wrap: nowrap (OR) wrap (OR) wrap-reverse;
}

4. justify-content 이 속성은 flex에 대해 원래 선언된 축의 정렬을 정의합니다.
flex-start: 항목이 flex-direction의 시작 부분으로 패킹됩니다.
플렉스 엔드: 플렉스 방향의 끝을 향해 패킹됨
시작: 쓰기 모드 시작 방향으로 패킹
end: 쓰기 모드 방향의 끝을 향해 패킹됨
왼쪽: 컨테이너의 왼쪽 가장자리를 향해 패킹된 왼쪽
오른쪽: 컨테이너의 오른쪽 가장자리를 향해 왼쪽으로 패킹됨
중심: 중심
space-between: 항목이 한 줄에 균등하게 배치됩니다.
space-around: 항목의 간격이 균등하고 항목 주변의 공간도 균등합니다.
space-evenly: 항목과 가장자리 사이의 간격이 균일합니다.

.container {
  justify-content: flex-start (OR) flex-end (OR) center (OR) space-between (OR) space-around (OR) space-evenly (OR) start (OR) end (OR) left (OR) right (OR) you get the idea;
}

5. align-items 현재 줄의 교차 축에 항목이 배치되는 방식을 정의합니다.

stretch: (기본값) 컨테이너를 채울 때까지 늘어납니다.
flex-start: 교차 축의 시작
flex-end: 교차축의 끝
center: 항목이 교차 축의 중앙에 정렬됩니다.
기준선: 기준선이 정렬되도록 항목이 정렬됩니다.

이를 위해 flex가 L-->R로 이동한다고 상상해보십시오. Flex-start는 모든 항목이 상단(북쪽)에 정렬됨을 의미합니다. Flex-end는 하단(남쪽)에 정렬합니다. Center는 항목의 중심을 중심으로 남북 중심을 따라 가운데에 배치합니다. 스트레치는 중앙에서 동일한 남북 공간을 채우도록 만듭니다. 기준선은 기준선에 따라 남북을 중심으로 합니다.

.container {
 align-items: (value here)
}

6. align-content 교차 축의 추가 공간 내에서 플렉스 컨테이너의 선을 정렬합니다. 이 속성은 여러 줄 플렉스 컨테이너에만 영향을 미칩니다.

일반: (기본값)
flex-start: 컨테이너 시작 부분에 패킹된 항목
flex-end: 컨테이너 끝까지 포장된 항목
센터: 컨테이너 중앙에 있는 항목
space-between: 컨테이너의 처음부터 끝까지 고르게 분포된 항목
space-around: 항목이 각 라인 주위에 동일한 간격으로 고르게 분포됨
space-evenly: 항목 주위에 동일한 공간을 두고 고르게 분포됩니다.
스트레치: 선이 공간을 차지하도록 늘어납니다.

.container {
  align-content: (value here)
}

7. gaps gap 속성은 플렉스 아이템 사이의 공간을 처리합니다. 항목 사이에만 적용되며 가장자리에는 영향을 주지 않습니다.

다음과 같이 선언할 수 있습니다.
간격: 20px(기본값)
간격: 20px 20px(행 간격 다음 열 간격)
행 간격: 20px
열 간격: 20px

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px;
  row-gap: 10px;
  column-gap: 20px;
}

하위 속성:

1. 주문 플렉스 컨테이너에 표시되는 주문 항목을 제어할 수 있습니다. 항목의 순서가 같으면 기본적으로 소스 순서로 설정됩니다.

.item {
  order: 5;
}

2. flex-grow 필요한 경우 확장할 수 있는 플렉스 항목의 기능을 정의합니다. 값은 비율입니다.

예를 들어 모든 항목의 값이 1인 경우 공간은 자식 간에 균등하게 분배됩니다. 한 항목에 2가 있는 경우 다른 모든 항목에 할당된 공간의 두 배를 차지합니다.

.item {
  flex-grow: 4;
}

3. flex-shrink 확장의 반대이며 필요한 경우 항목을 축소할 수 있습니다.

.item {
  flex-shrink: 3;
}

3. align-self 이것은 특정 항목에서 기본 정렬(부모의 align-items에 있는 정렬)을 재정의할 수 있도록 합니다.

.item {
  align-self: auto (OR) flex-start (OR) flex-end (OR) center (OR) baseline (OR) stretch;
}

flexbox를 익히는 데 시간이 좀 걸릴 수 있지만 그만한 가치가 있습니다!

CSS flexboxhere에 대한 이 놀라운 비주얼 가이드를 확인하십시오!