代码之家 › 专栏 › 技术社区 › Cakers

Flexbox垂直重新排序项目

vertical-alignment flexbox css html

Cakers · 技术社区 · 7 年前

我一直在想如何垂直地重新排列两个项目。我记得不久前用flexbox做过类似的事情,并找到了再次做的方法,但是当我尝试实现flexbox并给项目一个订单号时,什么都没有发生。我需要的是 .trail-title 堆叠在下面 .trail-items .

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

下面是我创建的JSFIDE: 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>

3 回复 | 直到 7 年前

Vadim Ovchinnikov 7 年前

改变会简单得多 flex-direction 值来自 column 到 column-reverse 而不是应用不同的 order 每个弹性项目的值。但这只适用于flex项目,因此您应该将其直接应用于 .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>

Johannes 7 年前

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

然后您可以添加 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>

VXp Kadir BuÅ¡atliÄ 7 年前

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