Center div's inside a div

Question

I need to center a div and inside the div there are more div's like the picture.

But the div's inside should go to the left site of the outer div. How can I achive this?

The cards are arranged with Flexbox. Image

//outer div
.cards {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
}

// inner div's
.card-inner {
  background: #cecdcd;
  color: #000;
  position: relative;
  width: 110px;
  height: 110px;
  margin: 8px auto;
  overflow: hidden;
  word-wrap: break-word;
  border-radius: 10px;
  transition: 200ms;
}

<div class="cards" @end="checkMove">
  <l-card
      class="card-inner"
      v-for="card in filterCards"
     :key="card.uuid"
     :data="card"
     @open-card="openCard($event)"
  ></l-card>
</div>

Riddell · Answer 1 · 2019-09-03T13:05:31.637

0

Should be something like in flexbox:

.cards {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  justify-content: flex-start;
}


.card-inner {
  display: flex;
  flex: 0 0 110px; 
  height: 110px;
  margin: 8px; 
  justify-content: center;
  align-items: center;
  background: #cecdcd;
  color: #000;
  border-radius: 10px;
}

<div class="cards">
  <div class="card-inner">
    Example
  </div>
  <div class="card-inner">
    Example
  </div>
  <div class="card-inner">
    Example
  </div>
  <div class="card-inner">
    Example
  </div>
  <div class="card-inner">
    Example
  </div>
  <div class="card-inner">
    Example
  </div>
  <div class="card-inner">
    Example
  </div>
  <div class="card-inner">
    Example
  </div>
  <div class="card-inner">
    Example
  </div>
  <div class="card-inner">
    Example
  </div>
  <div class="card-inner">
    Example
  </div>
  <div class="card-inner">
    Example
  </div>
  <div class="card-inner">
    Example
  </div>
  <div class="card-inner">
    Example
  </div>
</div>

edited Sep 03 '19 at 13:05

answered Sep 03 '19 at 12:45

Riddell

1,429
11
22

and how does the next row looks like? – masterOne Sep 03 '19 at 12:46
jup this looks good, but if I put this in mobile view, the cards go to the center and not to the left – masterOne Sep 03 '19 at 12:54
the last div's should go to the left – masterOne Sep 03 '19 at 12:55
@masterOne I've updated it for you – Riddell Sep 03 '19 at 13:05
right now, all div's are on the left, but I need the outer div-container in the center and the content inside the container should be on the right – masterOne Sep 03 '19 at 16:11

Varsha Dhadge · Answer 2 · 2019-09-03T12:53:41.753

Below is solution using flex

.flex-wrap {
  display: flex;
  justify-content: flex-start;
  align-content: stretch;
  flex-wrap: wrap;
  justify-content: space-around;
}

.flex-inner {
  display: flex;
  height: 100px;
  width: 25%;
  align-items: center;
  justify-content: center;
  background-color: #ccc;
  margin: 15px;
}

<div class="flex-wrap">
  <div class="flex-inner">
    content
  </div>
  <div class="flex-inner">
    content
  </div>
  <div class="flex-inner">
    content
  </div>
  <div class="flex-inner">
    content
  </div>
  <div class="flex-inner">
    content
  </div>
  <div class="flex-inner">
    content
  </div>
  <div class="flex-inner">
    content
  </div>
  <div class="flex-inner">
    content
  </div>
  <div class="flex-inner">
    content
  </div>
  <div class="flex-inner">
    content
  </div>
  <div class="flex-inner">
    content
  </div>
</div>

and how to put the div's to the left? – masterOne Sep 03 '19 at 12:53 — masterOne, Sep 03 '19 at 12:53

Center div's inside a div

2 Answers2