Próbowałem dowiedzieć się, jak zmienić dwa przedmioty pionowo. Pamiętam, że robi to coś w ten sposób z flexbox i spojrzałem w górę, aby zrobić to ponownie, jednak gdy próbuję wdrożyć flexbox i dać przedmioty Numer zamówienia Nic się nie dzieje. To, czego potrzebuję, jest .trail-title, aby stosować poniżej .trail-items.

Jak dostać je, aby przełączyć miejsca pionowo za pomocą flexbox?

Oto jsfidde, który stworzyłem: https://jsfiddle.net/tb1sv7n8/15/

#flash-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
  flex-direction: column;
}

.trail-items {
  order: 1;
  height: 1em;
}

.trail-title {
  height: 1em;
}

.breadcrumbs,
.breadcrumbs a {
  color: #544f47;
  font-size: .9em;
  font-weight: normal;
}
<nav id="flash-breadcrumbs" class="breadcrumb-trail breadcrumbs">
  <div class="tg-container">
    <h1 class="trail-title">Title of Article: The Love of This</h1>
    <ul class="trail-items">
      <li class="trail-item"><span>This here is the trail: The Love of This</span></li>
    </ul>
  </div>
</nav>
1
Cakers 19 luty 2018, 19:58

3 odpowiedzi

Najlepsza odpowiedź

Używasz niewłaściwego selektora CSS: Pojemnik Flex musi być #flash-breadcrumbs .tg-container - w kodzie .tg-container, jako dziecko #flash-breadcrumbs, jest jedynym elementem flex ...

Następnie możesz dodać ustawienia order zgodnie z potrzebami:

#flash-breadcrumbs .tg-container {
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
  flex-direction: column;
}

.trail-items {
  order: 1;
  height: 1em;
}

.trail-title {
  order: 2;
  height: 1em;
}

.breadcrumbs,
.breadcrumbs a {
  color: #544f47;
  font-size: .9em;
  font-weight: normal;
}
<nav id="flash-breadcrumbs" class="breadcrumb-trail breadcrumbs">
  <div class="tg-container">
    <h1 class="trail-title">Title of Article: The Love of This</h1>
    <ul class="trail-items">
      <li class="trail-item"><span>This here is the trail: The Love of This</span></li>
    </ul>
  </div>
</nav>
1
Johannes 19 luty 2018, 17:07

Będzie znacznie prostsze, aby zmienić wartość flex-direction z column do column-reverse niż stosować różne wartości order na każdy element flex. Ale to działało tylko na elementach flex, dzięki czemu należy zastosować to bezpośrednio do .tg-container. Zoptymalizowany CSS:

#flash-breadcrumbs .tg-container {
  display: flex;
  -webkit-flex-flow: column-reverse wrap;
  flex-flow: column-reverse wrap;
}

.trail-items,
.trail-title {
  height: 1em;
}

.breadcrumbs,
.breadcrumbs a {
  color: #544f47;
  font-size: .9em;
  font-weight: normal;
}
<nav id="flash-breadcrumbs" class="breadcrumb-trail breadcrumbs">
  <div class="tg-container">
    <h1 class="trail-title">Title of Article: The Love of This</h1>
    <ul class="trail-items">
      <li class="trail-item"><span>This here is the trail: The Love of This</span></li>
    </ul>
  </div>
</nav>
2
Vadim Ovchinnikov 21 luty 2018, 22:27

Musisz zastosować flex do .tg-container div, ponieważ jest rodzicem obu i zmienić wartość właściwości order do -1 dla .trail-items div, który umieści go powyżej .trail-title:

.tg-container {
  display: flex;
  /*flex-wrap: wrap; not necessarry*/
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap; /* this is enough */
  /*flex-direction: column; not necessarry*/
}

.trail-items {
  order: -1; /* modified */
  height: 1em;
}

.trail-title {
  height: 1em;
}

.breadcrumbs, .breadcrumbs a {
  color: #544f47;
  font-size: .9em;
  font-weight: normal;
}
<nav id="flash-breadcrumbs" class="breadcrumb-trail breadcrumbs">
  <div class="tg-container">
    <h1 class="trail-title">Title of Article: The Love of This</h1>
    <ul class="trail-items">
      <li class="trail-item">
        <span>This here is the trail: The Love of This</span>
      </li>
    </ul>
  </div>
</nav>
1
VXp 19 luty 2018, 17:04