CSS Flex-box 빠른 가이드

당신이 프론트엔드 개발자이고 주로 웹사이트의 스타일링 부분에 어려움을 겪고 있다면 이 글은 당신을 위한 것입니다.

웹 사이트의 가변 상자는 주로 레이아웃 목적과 컨테이너의 자식에 대한 정렬에 사용됩니다.

기초

위에 표시된 그림은 CSS에서 flex 속성이 작동하는 방식에 대한 기본 빌딩 블록입니다.

Flex Container: CSS display: flex 속성이 부여될 메인 컨테이너입니다.

Flex Items: flex-direction 속성에 따라 배치될 기본 컨테이너의 하위 항목입니다.

기본 크기: 총 크기, 즉 기본 축을 따라 있는 기본 컨테이너의 "너비/높이".

교차 크기: 총 크기, 즉 교차 축을 따라 있는 주 컨테이너의 "너비/높이".

Main Axis: 그림과 같이 행/열로 항목이 배치되는 축입니다. 이는 flex-direction 속성에 따라 변경됩니다.

교차축: 주축에 수직인 축입니다.

속성

flex의 속성은 주로 "컨테이너"속성과 "항목"속성의 두 부분으로 나뉩니다.

따라서 먼저 flex에 대한 몇 가지 컨테이너 속성이 있습니다.

표시하다

.container {
   display: flex;
}

위 이미지에서 보이는 녹색 배경은 flex의 display 속성이 부여된 메인 플렉스 컨테이너입니다. 자녀를 직접 낳을 것입니다.

플렉스 방향

flex-direction의 기본 속성은 행입니다. 첫 번째 예 자체에서 볼 수 있듯이

.container {
  // possible values
  flex-direction: row/column/row-reverse/column-reverse;
}

flex-direction 속성은 주축을 설정하고 항목은 방향 값에 따라 정렬됩니다.

플렉스 랩

기본값은 "줄 바꿈 없음"이며 항목이 단일 행이나 열에 맞춰지는 경향이 있음을 의미합니다.

.container {
  // possible values
  flex-wrap: no-wrap / wrap / wrap-reverse
}

이미지에서 알 수 있듯이 "no-wrap"의 기본 속성으로 인해 항목이 압착되고 단일 행에 정렬되고 맞춰지는 경향이 있습니다.





따라서 flex-wrap 속성을 wrap으로 설정하면 항목이 사용 가능한 공간만큼 들어갈 수 있으며 줄 바꿈이 허용되므로 다음 줄로 이동하여 위에서 아래로 여러 줄로 줄 바꿈됩니다.

wrap-reverse로 설정하면 wrap과 유사하게 작동하지만 반대 방향, 즉 아래에서 위로 작동합니다.

정당화-내용

이 속성은 기본 축을 따라 정렬을 설정합니다.

.container {
  // possible values
  justify-content: flex-start / flex-end / space-around / space- 
  between / center / space-evenly.

flex-start: 항목이 flex-direction의 시작 쪽으로 배치되는 기본값입니다.

flex-end: 항목이 flex-direction의 끝을 향하여 배치됩니다.

중앙: 항목이 중앙에 배치됩니다.

space-around: 항목이 배치되고 주위에 동일한 간격이 있습니다.

space-between: 컨테이너 항목 사이에만 공간이 있고 컨테이너 경계와 항목 사이에는 공간이 없습니다.

space-evenly: 항목이 가장자리 주위와 항목 사이에도 균등한 간격으로 배치됩니다.

정렬 항목

교차 축을 따라 정렬을 설정합니다.

.container {
  // possible values
  align-items: center / flex-start / flex-end / baseline / stretch
}

따라서 이들은 플렉스의 부모에서 사용해야 하는 속성입니다. 제작하면서 배우는 것이 가장 좋은 방법이기 때문에 주어진 샌드박스를 가지고 놀고 위에 나열된 속성의 값을 변경하여 배울 수 있습니다.

https://codesandbox.io/s/nervous-bassi-ckrh4x?file=/src/styles.css

PS: 피드백 환영합니다!! 다음에 또 만나요!!!