文章/答案/技术大牛

发布

社区首页 >问答首页 >灵活调整内容

问灵活调整内容
EN

Stack Overflow用户

提问于 2018-11-07 09:18:57

回答 1查看 132关注 0票数 1

我有这样的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>

我还尝试在favoritesWrapper显示Flex，并对齐项:证明，但没有结果。欢迎任何帮助。浏览器: Google

html

css

flexbox

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-11-07 09:45:55

通过添加跨越整个可用空间的隐藏的flex项，可以强制最后一行上的flex项保持对齐。一个常见的窍门是对该容器使用flex容器的伪元素(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>

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53186501

复制

相似问题

问灵活调整内容
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问灵活调整内容EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问灵活调整内容
EN