Question

我对flexbox比较陌生，我发现它很棒。我目前正在尝试将文本对齐到卡片部分的右上角，但我遇到的问题是因为我不希望它粘在屏幕右侧，而是放在最右边的卡片上 - 所以如果我有一张卡，它不会到屏幕的末端，而且如果我有超过屏幕可以容纳（我也灵活包装它）它仍然会坚持最右边的卡。

我简化了示例的代码（在全屏幕上输入并通过缩小/扩展devtools（F12）来播放屏幕宽度）

＆＃13;

.spacer {
  padding-top: 300px;
}

.card {
  height: 200px;
  width: 200px;
  background-color: blue;
  margin-right: 16px;
  margin-bottom: 16px;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.text-container {
  display: flex;
  justify-content: flex-end;
}

＆＃13;

<div class="spacer"></div>
<div>
    <div class="text-container">
        <div> wow </div>
    </div>
    <div class="container">
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
    </div>
</div>

＆＃13;

卡片数量不固定，如示例所示，它是* ng对于更改列表

我从同事那里听到了关于fxFlexOffset的一些信息，但是我不知道如何使用它，以及它是否对我的例子有帮助。

除了媒体查询之外，任何人都有任何想法，如果没有媒体查询就无法做到这一点，是否有一个简单的（卡片大小是固定的）？

谢谢！

Answer 1

如果你想要一个简单的CSS解决方案而没有媒体查询而没有JS我只能用一种愚蠢的方式来实现这个目标：

＆＃13;

.card {
  height: 200px;
  width: 200px;
  background-color: blue;
  margin-right: 16px;
  position:relative;
  text-align:right
}
.card:before {
  content:"WOW";
  font-size:20px;
  background:#fff;
  position:absolute;
  right:0;
  left:-1000%;
  top:-25px;
  z-index:0;
}
.card:after {
  content:"";
  position:absolute;
  bottom:0;
  background:#fff;
  left:0;
  right:0;
  height:20px;
  z-index:1;
}

.container {
  margin-top:50px;
  display: flex;
  flex-wrap: wrap;
}

.text-container {
  display: flex;
  justify-content: flex-end;
}

＆＃13;

<div class="container">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

＆＃13;

Flexbox与填充对齐？

1 个答案: