Flexbox를 사용하여 항목을 나란히 배치하는 방법은 무엇입니까? [복제]

질문

This question already has answers here:

Arrange 2 items per row using flexbox (2 answers)

Closed 14 days ago.

임 플렉스 상자에별로 익숙하지 않지만 다음이 필요한 결과를 줄 것이라고 가정했습니다. 페이지의 왼쪽을 항목 (카드)에 제공해야하지만 위치는 다음과 같아야합니다.

div class="flexContainer">

    <mat-card  class="turbineIcons"></mat-card>
    <mat-card  class="turbineIcons"></mat-card>
    <mat-card  class="turbineIcons"></mat-card>
    <mat-card  class="turbineIcons"></mat-card>
    <mat-card  class="turbineIcons"></mat-card>
    <mat-card  class="turbineIcons"></mat-card>
    <mat-card  class="turbineIcons"></mat-card>
    <mat-card  class="turbineIcons"></mat-card>
    <mat-card  class="turbineIcons"></mat-card>
    <mat-card  class="turbineIcons"></mat-card>
    <mat-card  class="turbineIcons"></mat-card>
    <mat-card  class="turbineIcons"></mat-card>
    <mat-card  class="turbineIcons"></mat-card>
    <mat-card  class="turbineIcons"></mat-card>
    <mat-card  class="turbineIcons"></mat-card>
    <mat-card  class="turbineIcons"></mat-card>
    <mat-card  class="turbineIcons"></mat-card>
  </div>

다음은 주요 div에 대한 내 수업입니다.

  .flexContainer{
     width: 50%;
                }

  .turbineIcons{               
          background-color:white;
          margin: 1em;
          height: 20px;
          width: 20px;
      }

페이지 왼쪽에 수직으로 배치 된 모든 항목을 표시합니다.

답변1

플렉스 container의 CSS에 추가해보십시오.

flex-wrap: wrap;

답변2

flex 속성을 정의하지 않았습니다.

이거 추가 해봐:

.flexContainer {
   display: flex;
   width: 50%;
 }

 

 

 

 

출처 : https://stackoverflow.com/questions/63249363/how-to-put-items-next-to-each-other-using-flexbox