Question

我需要将div居中，并且在div内还有更多的div，例如图片。

但是div的内部应该移到外部div的左侧。我该如何实现？

这些卡与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>

Answer 1

应该像在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>

Answer 2

以下是使用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>

div中的中心div

2 个答案: