html - 如何在 Flexbox 中使用 Order

问题描述

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

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

<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;
    }
  }

标签： htmlcssflexboxfrontend

解决方案

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

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

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

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

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

下面是一个使用 flexboxorder属性的例子：

.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-directionand的简写属性flex-wrap。

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

希望能帮助到你：）

html - 如何在 Flexbox 中使用 Order

问题描述

解决方案

推荐阅读