css - 设置 flexbox 顺序属性

Question

我正在尝试更改标题上的搜索表单的顺序。在桌面上它是它应该的样子。

目前在移动设备上，我只是在移动设备上使用 display:none，但我希望它位于我的头部标记顶部，在本例中是在 Logo 和菜单图标之前并跨越 100% 宽度。

我想在默认移动代码上使用 order: -1; 执行此操作，然后在桌面媒体查询上将搜索表单的顺序设置为 order: 1 ;。

我已经设置了一个 pen为此。

我想要类似的东西。

HTML

<header>
  <div class="logo fa fa-diamond">
    <h1>My</h1>
    <h2>party</h2>
  </div>
  <div class="search-form">
    <form>
      <input class="search" type="text" placeholder="Sök..." required>
      <input class="button" type="button" value="Sök..">
    </form>
  </div>
</header>

CSS

.search-form {
   display: flex;
   order: -1;
 }

CSS(桌面):

@media all and (min-width: 630px) {
  .search-form {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 5px;
    order:99;
  }
}

Answer 1

我想你想要这样的东西:

header, .search-form {
  flex-direction: column;
}
form {
  display: flex;
}
.search {
  flex-grow: 1;
}
@media all and (min-width: 630px) {
  header, .search-form {
    flex-direction: row;
  }
}

ul,
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: cornflowerblue;
}
header {
  display: flex;
  justify-content: space-between;
  background-image: url(https://images.rapgenius.com/cd9kack9vtcvcz8yr7h9kliji.1000x625x1.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #999;
  background-image
}
.fa-gift,
.fa-glass,
.fa-calendar,
.fa-facebook,
.fa-cutlery {
  font-size: 2em;
  padding: 0.8em;
}
.logo {
  display: flex;
  align-items: baseline;
}
h1,
h2 {
  color: white;
  font-size: 0.4em;
  color: white;
  text-shadow: 2px 2px 4px #FF00FF;
}
h1 {
  text-transform: uppercase;
}
.fa-diamond {
  color: #FF00FF;
  font-size: 5em;
  padding: 10px;
}
.fa-times,
.fa-bars {
  color: #FF00FF;
  font-size: 2em;
  padding: 0.5em;
}
/* Däljer checkboxen fär menyn*/

#nav-toggle {
  display: none;
}
/* Döljer Font icon Krysset i default läge */

#nav-toggle,
.fa-times {
  display: none;
}
/* Visar menu för  mobil i när checkboxen är checked läge */

#nav-toggle:checked + #wrapper nav {
  display: block;
}
/* Döljer font icon Bar när checkboxen är checked läge */

#nav-toggle:checked + #wrapper header .fa-bars {
  display: none;
}
/* Visar font icon krysset när checkboxen är i checked läge */

#nav-toggle:checked + #wrapper header .fa-times {
  display: block;
}
/* Döljer menyn för mobil i default läge */

nav {
  display: none;
}
/*För mobilen så sätter vi menyn på display:flex och flex-flow:column wrap för att visa menyn i en kolumn*/

nav ul {
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #5DDAF4;
  display: flex;
  flex-flow: column wrap;
}
nav ul a {
  font-size: 0.7em;
  display: block;
  padding: 0.5em;
}
nav > ul > li:hover > a {
  background: #e4e4e4;
  color: #92b4f2;
}
.search-form {
  display: flex;
  order: -1;
}
@media all and (min-width: 630px) {
  /* Döljer meny trigger för desktop */
  header > label {
    display: none;
  }
  /* visar menyn för desktop */
  nav {
    display: block;
  }
  nav ul {
    flex-flow: row wrap;
    justify-content: space-around;
  }
  .fa-gift,
  .fa-glass,
  .fa-calendar,
  .fa-facebook,
  .fa-cutlery {
    font-size: 2em;
    padding: 0.5em;
  }
  h1,
  h2 {
    font-size: 0.5em;
  }
  .search-form {
    display: block;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 5px;
    order: 99;
  }
  .search {
    padding: 8px 15px;
    background: rgba(255, 0, 255, 0.7);
    border: 0px solid #dbdbdb;
    color: white;
  }
  .button {
    position: relative;
    padding: 6px 15px;
    left: -8px;
    border: 2px solid #207cca;
    background-color: #207cca;
    color: #fafafa;
  }
}
header,
.search-form {
  flex-direction: column;
}
form {
  display: flex;
}
.search {
  flex-grow: 1;
}
@media all and (min-width: 630px) {
  header,
  .search-form {
    flex-direction: row;
  }
}

<!--Vi använder oss av en checkbox för att visa och dölja menyn på mobilen utan javascript-->
<input type="checkbox" id="nav-toggle">
<div id="wrapper">
  <header>
    <div class="logo fa fa-diamond">
      <h1>My</h1>
      <h2>party</h2>
    </div>
    <div class="search-form">
      <form>
        <input class="search" type="text" placeholder="Sök..." required>
        <input class="button" type="button" value="Sök..">
      </form>
    </div>
    <label for="nav-toggle"><i class="fa fa-bars"></i><i class="fa fa-times"></i>
    </label>
  </header>
  <nav>
    <ul>
      <li><i class="fa fa-gift"></i> Presenter</li>
      <li><i class=" fa fa-glass"></i> Party</li>
      <li><i class=" fa fa-calendar"></i> Events</li>
      <li><i class=" fa fa-facebook"></i>Facebook</li>
      <li><i class=" fa fa-cutlery"></i>Middagar</li>
    </ul>
  </nav>
</div>