如何在 Flexbox 中使用 Order [重复]

Question

我有这个部分是带有 flex-direction: 列的 flexbox，我想将标题作为第一个元素仅放在移动视图中。

但我不知道如何使用 order 属性来完成这项工作。

Desktop Mobile

<section class="section section--team">
      <img
        class="section--team__image"
        src="./imagens/requite.jpeg"
        alt="Time da Instalura" />

      <div class="section--team__content">
        <h1 class="section--team__title">Nossa Equipe</h1>
        <p class="section__text section--team__text">
          O instalura foi criado por uma equipe compentente utilizando que há de
          mais moderno na tecnologia, mas sempre primando pela experiência do
          usuário.
        </p>

        <p class="section__text section--team__text">
          Venha conhecer nossa equipe. Quem sabe até trabalhar conosco!
        </p>

        <ul class="section--team__links">
          <li><i class="fas fa-users"></i> <a> Conheça nossa equipe </a></li>
          <li>
            <i class="fas fa-project-diagram"></i> <a> Trabalhe com a gente </a>
          </li>
        </ul>
      </div>
</section>

部分和元素的我的样式表。现在，我想帮助我会更清楚

 &--team {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding-top: 3rem;
    padding-left: 3rem;
    padding-right: 3rem;
    background-color: $ocean-blue;

    @media (min-width: 320px) and (max-width: 480px) {
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    &__content {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      height: 100%;
    }

    &__title,
    &__links li {
      a {
        color: $white;
        margin-left: 2px;
      }

      .fa-users,
      .fa-project-diagram {
        color: $blue-lighten;
      }
    }

    &__text,
    &__links {
      margin-left: 2rem;

      @media (min-width: 320px) and (max-width: 480px) {
        margin-left: 0rem;
      }
    }

    &__title {
      color: $white;
      font-size: $font-xl;
      align-self: center;
      margin-bottom: $margin-sm;
    }

    &__text {
      margin-bottom: $margin-xs;
    }

    &__links {
      margin-top: $margin-xs;

      li {
        margin-top: $margin-xs;
      }
    }

    &__image {
      height: 10rem;
      margin-bottom: 3rem;
      border-radius: 3px;
    }
  }

Answer 1

Flexbox 排序发生在 flex-direction 和 flex-wrap 属性上。 Flex-direction 指定主轴的方向。它可以采用以下值：

• row（默认）主轴：从左到右
• row-reverse主轴：从右到左
• column主轴：从上到下
• column-reverse主轴：从下到上

Flex-wrap 定义弹性项目是单行还是多行。它还控制交叉轴的方向。它可以有三个值：

• nowrap（默认）在一行中布置弹性项目；横轴 站在默认位置
• wrap 多行布局弹性项目；横轴位于 默认位置
• wrap-reverse 多行布局弹性项目；横轴是 反转

默认情况下，弹性项目的显示顺序与它们在源文档中的显示顺序相同。 order 属性可用于更改此顺序。

这里是一个使用 flexbox 的 order 属性的例子：

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
}

.flex-item:nth-of-type(1) { order: 3; }
.flex-item:nth-of-type(2) { order: 4; }
.flex-item:nth-of-type(3) { order: 1; }
.flex-item:nth-of-type(4) { order: 5; }
.flex-item:nth-of-type(5) { order: 2; }

.flex-item {
  background: tomato;
  padding: 5px;
  width: 100px;
  height: 100px;
  margin: 5px;
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>

仅供参考flex-flow 属性是flex-direction 和flex-wrap 的简写属性。

您可以查看this MDN 网络文档以深入了解。

希望对你有帮助:)

Answer 2

您可以在 Flexbox 中使用此代码

body {
  margin: 0;
}


/*************** MOBILE *************/

.container {
  display: flex;
  flex-direction: column;
  height: 200px;
}

div.orange {
  background-color: orange;
}

div.blue {
  order: -1;
  background-color: aqua;
}

div.green {
  background-color: lightgreen;
}

.container>div {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}


/***************************/

@media screen and (min-width:800px) {
  .container {
    flex-wrap: wrap;
  }
  div.orange {
    flex-basis: 100%;
    width: 33%;
  }
  div.blue {
    flex-basis: 100%;
    width: 33%;
    order: 0;
  }
  div.green {
    flex-basis: 100%;
    width: 33%;
  }
}

<div class="container">
  <div class="orange">1</div>
  <div class="blue">2</div>
  <div class="green">3</div>
</div>