안녕하세요 FlexBox, 만나서 반갑습니다 🙂

플렉스박스란? 🤔

이 도구는 각 요소 크기를 모르는 경우에도 컨테이너의 항목 간에 공간을 배치, 정렬 및 분배하는 효율적인 방법을 제공합니다.

브라우저 호환성 ✔

오늘날 flexbox는 모든 최신 브라우저에서 지원됩니다.

개념 💡

다음 개념에 대한 참조로 다음 이미지를 고려하십시오.



표시하다
이 속성은 플렉스 컨테이너를 정의하므로 모든 컨테이너의 자식은 플렉스 컨텍스트를 갖게 됩니다.

.container {
  display: flex;
}

플렉스 방향
이 속성을 사용하여 주축을 설정합니다. Flexbox는 단방향이므로 가로 행이나 세로 열에 항목을 표시할 수 있습니다.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

주문하다
Flexbox를 사용하면 order 속성을 사용하여 컨테이너 내부의 각 항목 순서를 변경할 수 있습니다. 기본적으로 HTML에 동일한 주문이 표시됩니다.

.container {
  display: flex;
}
.item {
  order: <integer>;
}

유연한 성장
이 속성은 항목이 차지해야 하는 컨테이너 내부의 사용 가능한 공간을 정의합니다. 필요한 경우 항목을 성장시키려는 경우에 유용합니다.

.item {
  flex-grow: <number>; /* Default 0 */
}

플렉스 랩
Flexbox는 항상 한 줄에 모든 항목을 표시하려고 합니다. 이를 방지하기 위해 필요한 경우 flex-wrap 속성을 사용할 수 있습니다.


nowrap - 기본값입니다. 한 줄의 항목.wrap - 위에서 아래로 여러 줄.wrap-reverse - 아래에서 위로 여러 줄.

.container {
   flex-wrap: nowrap | wrap | wrap-reverse;
}

플렉스-수축
이 속성은 항목이 축소되는 기능을 정의합니다.

.item {
   flex-shrink: <number>; /* Default 1 */
}

몸을 풀다
이 속성을 사용하면 flex-grow , flex-shrink 및 flex-basis 사용을 피할 수 있습니다. 두 번째 매개변수는 flex-shrink 이고 세 번째 매개변수는 flex-basis 입니다. 기본값0 1 auto .

.item{
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
}

정당화-내용
이 속성을 사용하여 기본 축을 따라 컨테이너의 자식 정렬을 정의합니다.


flex-start - 기본값입니다. 항목은 왼쪽에 정렬됩니다.flex-end - 항목이 오른쪽에 정렬됩니다.center - 항목이 중앙에 있음space-between - 항목이 라인에 고르게 분포됩니다. 왼쪽의 첫 번째 항목, 오른쪽의 마지막 항목.space-around - 항목 주위에 동일한 공간을 두고 고르게 분포됩니다.space-evenly - 두 항목 사이의 간격이 동일합니다.

.container {
   justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

정렬 항목
항목이 기본 축의 반대 축에서 동작하는 방식을 정의합니다. (항상 수직입니다)


flex-end - 항목의 교차 끝 여백 가장자리가 교차 끝 라인에 배치됩니다.flex-start - 항목의 교차 시작 여백 가장자리가 교차 시작 라인에 배치됩니다.stretch - 기본값 - 최소 너비/최대 너비를 고려하여 컨테이너를 채웁니다.center - 항목이 중앙에 있음baseline - 기준선을 기준으로 정렬된 항목 정렬

.container {
   align-items: stretch | flex-start | flex-end | center | baseline;
}

정렬 자체
이 속성을 사용하여 특정 항목에 대한 기본 정렬을 재정의할 수 있습니다.

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

정렬 내용
교차 축에 추가 공간이 있을 때 이 속성을 사용하여 컨테이너의 선을 정렬할 수 있습니다.

프로 팁: 컨테이너 안에 항목이 한 줄 이상 있을 때만 이 속성을 사용하십시오.


stretch - 기본값 - 콘텐츠가 남은 공간을 차지합니다.flex-start - 컨테이너의 시작 부분에 정렬된 선flex-end - 컨테이너 끝에 정렬된 선center - 중앙에 정렬된 선space-between - 선이 고르게 분포됨, 첫 번째 선은 컨테이너의 시작 부분에 있고 마지막 선은 컨테이너의 끝에 있음space-around - 라인 주위에 동일한 간격으로 고르게 분포됨

.container {
   align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

놀이터👨‍💻

궁금하세요? 한번 해보고 가지고 놀아보세요.

감사합니다 🙌

이 기사가 도움이 되길 바랍니다. 질문이 있으시면 언제든지 저에게 연락하십시오.