How to put items next to each other using flexbox?

Question

Im not very much familiar with flex box but i assumed the following would give me the result i need,i need to give left side of the page to items(cards)but the way they position should be next together :

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>

here is my class for the main div:

  .flexContainer{
     width: 50%;
                }

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

this shows all the items verticaly placed on the left side of the page

score 0 · Answer 1 · answered Aug 04 '20 at 14:58

0

You haven't defined the flex properties.

Add this:

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

answered Aug 04 '20 at 14:58

Michael Benjamin

346,931
104
581
701

but now it takes up whole the width even thought i put 50% – Aug 04 '20 at 15:00
1

Try `display: inline-flex` – Michael Benjamin Aug 04 '20 at 15:01
Erica approach works,your also,who should i give the selected answer? – Aug 04 '20 at 15:03

score 0 · Accepted Answer · answered Aug 04 '20 at 14:59

0

Try adding to the css of you flex-container:

flex-wrap: wrap;

answered Aug 04 '20 at 14:59

Erica T.

430
3
9

How to put items next to each other using flexbox?

2 Answers2