如何在 Flexbox 中使用订单

Question

I have this section that is flexbox with a flex-direction: column, and i want to put the title as the first element only in the mobile view.

But i don't know how to use the order property to make this work.

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>

My Stylesheet of the Section and the elements. Now, i think it will be more clear to help me

 &--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 ordering happens with the flex-direction and flex-wrap properties. Flex-direction specifies the direction of the main axis. It can take the following values:

• row (default) main axis: left to right
• row-reverse main axis: right to left
• column main axis: top to bottom
• column-reverse main axis: bottom to top

Flex-wrap defines if flex items are laid out in a single line or wrap to multiple lines. It also controls the direction of the cross axis. It can have three values:

• nowrap (default) lays out flex items in a single line; the cross axis stands in the default position
• wrap lays out flex items in multiple lines; the cross axis stands in the default position
• wrap-reverse lays out flex items in multiple lines; the cross axis is reversed

Flex items are displayed in the same order as they appear in the source document by default. The order property can be used to change this ordering.

Here is an example of using flexbox's order property:

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

FYI the flex-flow property is a shorthand property for flex-direction and flex-wrap .

You can check out this MDN web doc for diving deeper.

Hope it helps:)

Answer 2

You can use this code in 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>