主页 / 问题 / 1373212
Accepted
Alexandr_Yakovlev
Asked:2022-06-20 03:21:03 +0000 UTC2022-06-20 03:21:03 +0000 UTC

css order 属性无法正常工作

  • 772

我有一个元素列表，其父元素与display: flex. 我想重新分配其中一个元素的顺序，例如，我取第一个并给它order: 1or order: 2，但是它从第一个位置转移到最后一个（总共有 5 个元素）。为什么会这样？

scss

.boolmarks {
  max-width: 500px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
}

.boolmark {
  width: 100px;
  height: 100px;

  &:first-child {
    order: 2;
  }

  &__inner,
  &__link {
    height: inherit;
  }

  &__link {
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    transition: background-color .5s;
    padding: 10px;
    color: #dbdbdb;

    &:hover {
      background-color: rgba(#383838, .6);
    }

    &:hover > h3 {
      text-decoration: underline;
    }
  }

  &__title {
    white-space: nowrap;
    word-break: break-word;
    max-width: 75px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
  }
}

html

    <ul class="boolmarks">
      <li class="boolmark">
        <div class="boolmark__inner">
          <a class="boolmark__link" href="#">
            <h3 class="boolmark__title">1</h3>
          </a>
        </div>
      </li>
      <li class="boolmark">
        <div class="boolmark__inner">
          <a class="boolmark__link" href="#">
            <h3 class="boolmark__title">2</h3>
          </a>
        </div>
      </li>
      <li class="boolmark">
        <div class="boolmark__inner">
          <a class="boolmark__link" href="#">
            <h3 class="boolmark__title">3</h3>
          </a>
        </div>
      </li>
      <li class="boolmark">
        <div class="boolmark__inner">
          <a class="boolmark__link" href="#">
            <h3 class="boolmark__title">4</h3>
          </a>
        </div>
      </li>
      <li class="boolmark">
        <div class="boolmark__inner">
          <a class="boolmark__link" href="#">
            <h3 class="boolmark__title">5</h3>
          </a>
        </div>
      </li>
    </ul>
css

1 个回答

  1. Best Answer

    您需要为order所有弹性项目分配一个属性boolmark。

    在您的情况下，您可以尝试这样做：

    .boolmark {
    width: 100px;
    height: 100px;

    &:first-child {
        order: 2;
    }
    &:nth-child(2) {
        order: 1;
    }
    &:nth-child(3) {
        order: 4;
    }
    &:nth-child(4) {
        order: 5;
    }
    &:last-child {
        order: 3;
    }
//.....
    • 1

相关问题