时间戳

首页 > 解决方案 > Flex-direction 列未按预期工作

html - Flex-direction 列未按预期工作

问题描述

我有以下标记：

<div class="container">
  <div class="logo"></div>
  <div class="search"></div>
  <div class="button"></div>
</div>

CSS（桌面）：

.container {
  display: flex;
}

在桌面视图中，它们连续显示，如下所示：

在此处输入图像描述

但在移动视图上，我希望他们重新排序：

在此处输入图像描述

我尝试了以下样式：

// here's media query for mobile devices
.container {
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch // so my items would be filling width
}

.logo {
  order: 1;
  flex: 1 0 50%;
}

.search {
  order: 2;
  flex: 0 1 100%;
}

.button {
  order: 1;
  flex: 1 0 50%;
}

但我的结果是：

在此处输入图像描述

这甚至可以通过 flexbox 实现吗？

标签： htmlcssflexbox

解决方案

您应该查看“flex-grow”，它允许弹性项目在必要时增长，以占用其容器中可用的尽可能多的空间。如果所有 flex-items（在您的情况下：.logo、.search、.button）的 flex-grow 值为 1，则 .container 中的剩余空间将平均分配给其子项。

此外，您应该使用

    flex-direction: row;

在您的情况下，如果您希望它们水平拉伸

查看此小提琴以供参考！https://jsfiddle.net/hgs5w19y/2/

推荐阅读