Question

我有一个类似html组件的“卡片”，它以这种方式显示：

+------+-----------------+-------+
|   1  |        2        |   3   |
+------+-----------------+-------+

当我低于720px时，我希望它变成这样：

+------+-------------------------+
|      |        2                |
|   1  +-------------------------+
|      |        3                |
+------+-------------------------+

我很难弄清楚如何使用flexbox实现这一目标。我想知道这是否是解决这类问题的正确方法。

初始状态，目前是这样的：

<div class="card">
          <div class="status"></div>
          <div class="title">Tryout.it</div>
          <div class="details">156 emails</div>
          <div class="action"><button>go</div>
        </div>

和我的CSS类似：

.card {
  margin: 10px;
  min-width: 320px;
  min-height: 42px;
  background-color: white;
  border: 1px solid #eee;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 9px 10px;
}
.card .status {
  width: 30px;
  height: 24px;
}
.card .title {
  flex-grow: 1;
}

Answer 1

使用当前的HTML结构，Flexbox无法实现此目的。

（将来你可以使用网格布局，但目前it is not supported。）

但是，如果您将2和3放入容器中，则可以执行此操作：

.card {
  margin: 10px;
  border: 1px solid #eee;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  padding: 9px 10px;
}
.card .avatar {
  width: 30px;
  height: 24px;
}
.card .container {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
}
.card .container .name {
  width: 50%;
}
.card .container .presentation {
  flex-grow: 1;
}


@media (max-width: 720px) {
  .card .container .name {
    width: 100%;
  }
}

<div class="card">
  <div class="avatar">
    x
  </div>
  <div class="container">
    <div class="name">Mr. Potato</div>
    <div class="presentation">Hi!</div>
  </div>
</div>

Answer 2

您可以使用CSS媒体查询在特定屏幕尺寸下应用不同的div样式。

@media screen and (max-width: 720px) {
    .css-class {
    }

    #css-id {
    }
}

Answer 3

@ciaoben，既然你在问了问题之后就消失了，我会根据.title和.details块意味着来自你的第2和第3块的逻辑提供答案。图表和.action意味着是对面的第四个区块。

简单地说，在应用CSS进行调整之前，您需要HTML结构的另一个层。您可以将想要在另一个DIV中更改外观的块包装起来。

更新HTML结构后，只需应用@media查询即可调整所需屏幕尺寸的外观。

请参阅下面的示例。注意：我将您的CSS更新为更简化的Flexbox方法。此外，它会display: flex阻止.action块，因为正如我上面提到的那样，您根本无法识别它。

＆＃13;

.card {
  margin: 10px;
  min-width: 320px;
  min-height: 42px;
  background-color: white;
  border: 1px solid #eee;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 9px 10px;
}

.card .status {
  width: 30px;
}

.card .stretchit, .card .action {
  -webkit-flex: 1;
  flex: 1;
}

@media screen and (min-width: 720px) {
  .card .stretchit {
    display: flex;
  }

  .card .title, .card .details {
    -webkit-flex: 1;
    flex: 1;
  }
}

＆＃13;

<div class="card">
  <div class="status"></div>
  <div class="stretchit">
    <div class="title">Tryout.it</div>
    <div class="details">156 emails</div>
  </div>
  <div class="action"><button>go</button></div>
</div>

＆＃13;

将flex项从行对齐切换到列对齐

3 个答案: