많은 튜토리얼의 한 가지 문제는 그들이 당신에게 모든 것을 가르치려고 노력하고 그것을 사용하는 시기와 이유를 말하는 것을 잊었다는 것입니다.

이 튜토리얼에서는 Flexbox의 가장 일반적인 사용 사례를 보여 드리고 이를 통해 향후 프로젝트에 필요한 모든 것을 배우게 됩니다.

Flexbox의 가장 일반적인 8 가지 사용 사례 인 8 가지 작업을 해결하여 flexbox를 배웁니다.

스타터를 다운로드하고 여기에서 따라 할 수 있습니다.

Flexbox- 튜토리얼-스타터 

여기에서 튜토리얼을 찾을 수 있습니다.

__________ ? 스포일러 경고 __________ 

1 : 블록 요소를 수평으로 정렬 

다음과 같이 말하면 됩니다.

.container {
  display: flex;
}

모든 블록 요소가 수평 축에 정렬됩니다.

2 : 중앙 항목 

내가 많이 사용하는 Flexbox의 가장 많은 사용 사례 중 하나는 다음과 같습니다.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

이렇게 하면 항목이 가로 및 세로 축의 중앙에 배치됩니다.

3 : 항목 사이에 공간 분배 

Flexbox의 또 다른 일반적인 용도는

.container {
  display: flex;
  justify-content: space-between;
}

항목 사이에 동일한 공간을 둡니다.

한 가지 예는 탐색 항목입니다.

4 : 항목을 바닥으로 밀기 

여기에 세 가지 옵션이 있습니다.

2 개의 항목을 사용하면 justify-content : space-between;을 사용할 수 있습니다. 첫 번째 항목은 시작으로, 마지막 항목은 끝으로 푸시됩니다.

.container {
  display: flex;
  justify-content: space-between;
}

로고와 버튼 만 있는 예에서 볼 수 있습니다.

또는 로고 및 탐색 항목 :

항목이 3 개 이상인 경우 항목 사이에 flex-grow : 1을 추가하는 것이 내 선택입니다.

  <div class="option-2">
     <div class="container">
        <div class="item sm"></div>

        <div class="item"></div>

        <div class="space"></div>

        <div class="item"></div>
        </div>
  </div>

  .option-2 .space {
    flex-grow: 1;
  }

그리고 우리는 :

다음과 같은 더 복잡한 탐색에서 볼 수 있습니다.

첫 번째 항목에 flex-grow:1를 줄 수도 있습니다.

  .option-3 .item:first-child {
    flex-grow: 1;
  }

이렇게 함으로써 첫 번째 아이는 가능한 한 많이 확장되고 다음과 같은 결과를 얻게 됩니다.

입력 구성 요소의 몇 가지 예 :

5 : 상대 크기 열 작성 

항목에 flex 값 : flex : {number}를 지정하면 flex 값을 가진 다른 항목에 상대적인 항목의 공간을 제어 할 수 있습니다. 예를 들면 :

.task-5 .item-1 {
  flex: 3;
}

.task-5 .item-2 {
  flex: 1;
}

.task-5 .item-3 {
  flex: 1;
}

.task-5 .item-4 {
  flex: 1;
}

우리는 :

예를 들어 테이블 레이아웃에서 유용합니다.

6 : 미디어 쿼리를 사용하거나 사용하지 않고 반응 형 레이아웃 구축 

다음을 사용하여 :

.task-6 .container {
  display: flex;
  flex-wrap: wrap;
}

컨테이너 내부에서 항목이 축소되지 않는 반응 형 레이아웃을 갖게 됩니다.

다음과 같은 방법으로 2 열 레이아웃을 가질 수 있습니다.

.task-6 .item {
  flex-basis: 50%;
}

또는 화면이 375px보다 넓은 경우 4 열 레이아웃 :

@media (min-width: 375px) {
  .task-6 .item {
    display: flex;
    flex-basis: 25%;
  }
}

7 : 변경 순서 (일반적이지 않음) 

다음을 제공하여 항목의 순서를 변경할 수 있습니다.

.task-7 .item-1 {
  order: 1;
}

기본적으로 순서는 0이며 마이너스 숫자를 취할 수 있습니다.

8 : 항목의 위치 변경 (일반적이지 않음) 

플렉스 내부의 항목은 다음과 같이 말함으로써 스스로 위치를 변경할 수 있습니다.

align-self: auto | flex-start | flex-end | center | baseline | stretch;

이제 YouTube에서 전체 자습서를 확인할 수 있지만 이 정보가 Flexbox를 이해하고 배우는 데 도움이 되기를 바랍니다.

https://dev.to/nghiemthu/master-flexbox-in-12-minutes-with-most-common-use-cases-3e1g