设置flexbox顺序属性

Question

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

目前在手机上，我只是在手机上使用display:none，但我希望它位于我的顶部标记，在这种情况下，位于徽标和菜单图标之前，跨度为100%。

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

我已经为此准备了一支钢笔。

类似的东西是我想要的。

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>

Answer 2

在您的示例中，标题是"文档顺序"，就像您希望移动使用一样。您的构建需要一个包装器和@media查询，以更改较大设备的元素顺序：

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");
 header {
  /* a column of two rows: logo+search (need a wrapper) and label */
  display: flex;
  flex-direction: column;
}
.wrapper {
  display: flex;
  flex-direction: column;
  order: 1;
  /* row 1 of header */
  justify-content: space-between;
}
label {
  order: 2
}
/* row 2 of header */
.search-form {
  /* first in .wrapper  */
}
.logo {
  /* second in .wrapper */
}
form {
  display: flex;
  justify-content: flex-end;
}
@media all and (min-width: 630px) {
  .logo {
    order: 1
  }
  .search-form {
    order: 2;
    align-items: center;
    padding-right: 5px;
  }
}
/* {
  outline: 1px dashed red
}
/* just for debugging */

<header>
  <div class="wrapper">
    <div class="search-form">
      <form>
        <input class="search" type="text" placeholder="Sök..." required>
        <input class="button" type="button" value="Sök..">
      </form>
    </div>
    <div class="logo fa fa-diamond">
      <h1>My</h1>
      <h2>party</h2>
    </div>
  </div>
  <label for="nav-toggle"><i class="fa fa-bars"></i><i class="fa fa-times"></i>
  </label>
</header>