Question

我的div是这样的：绿色是主要div的填充。您可以看到第一行和第二行，我在右侧有空格。我想成为辩护人，但我想保留的第三行是可能的。所以我想填充额外的空间，但是我不想拉伸第三行。

在那个主要的div中，我有这个div：这个div将所有卡片都保留在里面。

.favoritesWrapper {}

.card {
  height: 130px;
  background-color: white;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.icon {
  width: 40px;
  height: 40px;
  margin: auto;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
  padding-left: 35px;
  padding-right: 35px;
  margin-top: 5px;
  text-align: center;
  font-size: initial
}

<html>
<div class="favoritesWrapper">
  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      Conexus integration
    </div>
  </div>

  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      App Server
    </div>
  </div>

</html>

我还尝试放置收藏夹包装显示Flex，并对齐项目：对齐但是没有结果。欢迎任何帮助。浏览器：谷歌浏览器

Answer 1

您可以通过添加跨越整个可用空间的隐藏的伸缩项目来强制使最后一行的伸缩项目保持左对齐。一个常见的技巧是使用flex容器的：pseudo来实现（flex容器的伪元素就像子元素一样是flex项）

.favoritesWrapper {
  display: flex;
  flex-wrap: wrap;
}

/* this :pseudo is an hidden flex item which occupies available space on last row.
   Result: last row isn't justified */
.favoritesWrapper::after {
  content: '';
  flex: 1 1 auto;
  /* @DEBUG visualize the trick */
  border: 1px solid deeppink;
  background: pink;
}

.card {
  flex: 1 0 auto; /* flex-basis must be auto and not 0 so 2nd row of text in cards can display on a single line */
  height: 130px;
  background-color: white;
  margin-right: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.icon {
  width: 40px;
  height: 40px;
  margin: auto;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
  padding-left: 35px;
  padding-right: 35px;
  margin-top: 5px;
  text-align: center;
  font-size: initial
}

<div class="favoritesWrapper">
  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      Conexus integration
    </div>
  </div>

  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      App Server
    </div>
  </div>
  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      Conexus integration
    </div>
  </div>

  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      App Server
    </div>
  </div>
  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      Conexus integration
    </div>
  </div>

  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      App Server
    </div>
  </div>
  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      Conexus integration
    </div>
  </div>

  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      App Server
    </div>
  </div>
  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      Conexus integration
    </div>
  </div>

  <div class="card">
    <div class="icon">
      <mat-icon class="s-32">home</mat-icon>
    </div>
    <div class="text">
      App Server
    </div>
  </div>
</div>

Flex证明内容

1 个答案: