Flex-direction 列未按预期工作[重复]

Question

我有以下标记：

<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 实现吗？

Answer 1

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

另外，你应该使用

    flex-direction: row;

如果你想让它们水平伸展

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

Answer 2

不需要方向也不需要那么多规则，只需设置断点并重置.search行为

.container {
  display: flex;
  flex-wrap: wrap;
}

.container>div {
  flex: 1;
}

div.search {
  order: 1;
  flex-basis: 100%;
}

@media screen and (min-width:731px) {
  div.search {
    order: 0;
    flex: 1
  }
}


/* demo purpose */

.container {
  background: gray;
}

.container>div {
  padding: 1em;
  margin: 1em;
  background: lightgray;
}

.container>div:before {
  content: attr(class);
  color: black;
}

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

断点值将更新为您的（此处设置为 731 用于演示），以查看行为，在整页中运行 sn-p，或玩演示 https://codepen.io/gc-nomade/pen/mYXZdY

Answer 3

你需要使用 flex-grow（了解 flexbox 的好资源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/）

HTML

<div class="container">
  <div class="logo">Logo</div>
  <div class="search">Search</div>
  <div class="button">Button</div>
</div>

CSS

.container {
  background-color: #ccc;
  display: flex;
  width: 300px;
  flex-wrap: wrap;
  text-align: center;
}

.container > div {
  background-color: grey;
  margin: 10px 20px;
  padding: 10px 20px;
}

.logo {
  order: 1;
  flex-grow: 1;
}

.search {
  order: 2;
  flex-grow: 2;
}

.button {
  order: 1;
  flex-grow: 1;
}