将弹性项目从行对齐切换到列对齐答案

【问题标题】：Switching flex items from row to column alignment将弹性项目从行对齐切换到列对齐
【发布时间】：2015-11-11 22:55:07
【问题描述】：

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

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

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

+------+-------------------------+
|      |        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;
}

【问题讨论】：

我不确定我是否遵循。您的图片显示 3 个街区，而不是 4 个街区。哪些块构成与您的图表相关的哪些块？

标签： css flexbox

【解决方案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>

【讨论】：

如果你能解释反对意见，我会很感激。我是不是误会了什么？
我不知道为什么你的投票被否决了，但我的回答也是。从那以后，它也被赞成了。有趣的是，我们都给出了相同的答案，唯一的区别是我试图解释图表及其原始代码块。

【解决方案2】：

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

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

    #css-id {
    }
}

【讨论】：

【解决方案3】：

@ciaoben，既然你在问你问题后消失了，我将根据 .title 和 .details 块是你图表中的块 2 和 3 以及 @987654323 的逻辑提供答案@ 是对面的第四个区块。

简单地说，您需要为您的 HTML 结构再添加一层，然后才能应用 CSS 来调整它。您可以将要更改外观的块包装在另一个 DIV 中。

一旦您更新了 HTML 结构，只需应用 @media 查询即可将外观调整为所需的屏幕尺寸。

请看我下面的例子。注意：我将您的 CSS 更新为更简化的 flexbox 方法。此外，它将display: flex 应用于.action 块，因为正如我上面提到的，您根本无法识别它。

.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;
  }
}

<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>

【讨论】：