Flexbox 垂直重新排序项目答案

【问题标题】：Flexbox reorder items verticallyFlexbox 垂直重新排序项目
【发布时间】：2018-02-22 06:27:16
【问题描述】：

我一直在试图弄清楚如何垂直重新排列两个项目。我记得不久前用 flexbox 做过类似的事情，并且已经找到了再次这样做的方法，但是当我尝试实现 flexbox 并给项目一个订单号时，什么也没有发生。我需要的是让.trail-title 堆叠在.trail-items 之下。

如何让他们使用 flexbox 垂直切换位置？

这是我创建的 JSFidde： 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>

【问题讨论】：

标签： html css flexbox vertical-alignment

【解决方案1】：

将flex-direction 值从column 更改为column-reverse 比为每个弹性项目应用不同的order 值要简单得多。但这仅适用于弹性项目，因此您应该直接将其应用于.tg-container。优化了你的 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】：

您使用了错误的 CSS 选择器：flex 容器必须是 #flash-breadcrumbs .tg-container - 在您的代码中 .tg-container，作为 #flash-breadcrumbs 的子项，是唯一的 flex 项...

然后您可以根据需要添加order 设置：

#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>

【讨论】：

【解决方案3】：

您需要将flex 应用于.tg-container div，因为它是两者的父级，并将.trail-items div 的order 属性的值更改为-1，然后将其放在.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>

【讨论】：