html - flex 订单不适用于无序列表

Question

我正在博客存档页面上尝试 flex，列出每页的最后 8 个条目，其中一个侧边栏作为 flex 元素之一 - 总共 9 个元素。侧边栏以正常的 flex 顺序显示在第一位，但我希望它显示在第三位(就像侧边栏通常那样)。在边栏元素上尝试任何 order 号都不会在列表中移动它

https://jsfiddle.net/oliver_p/2v3duxy4/2/

html * {
  box-sizing: border-box;
}

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.list-item {
  display: flex;
  padding-right: 20px;
  width: 33.33333%;
  padding-bottom: 20px;
}

.list-item:first-child {
  order: 2;
}

.list-content-blog {
  background-color: white;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.list-content-blog .list-content-holder {
  flex: 1 0 auto;
  padding: 30px;
}

<ul>
  <li class="list-item">
    <div class="list-content-blog">

      <div class="list-image-holder">
        <a href="#">
          <img class="img-responsive" src="#">
        </a>
      </div>
      <div class="list-content-holder">
        <p class="post-meta-date"><i class="far fa-clock"></i> 5 March 2018</p>
        <h2 style=""><a href="#">Blog Title</a></h2>
      </div>

    </div>
  </li>
  <li class="list-item">
    <div class="list-content-blog">

      <div class="list-image-holder">
        <a href="#">
          <img class="img-responsive" src="#">
        </a>
      </div>
      <div class="list-content-holder">
        <p class="post-meta-date"><i class="far fa-clock"></i> 10 March 2018</p>
        <h2 style=""><a href="#">Blog Title</a></h2>
      </div>

    </div>
  </li>
  <li class="list-item">
    <div class="list-content-blog">

      <div class="list-image-holder">
        <a href="#">
          <img class="img-responsive" src="#">
        </a>
      </div>
      <div class="list-content-holder">
        <p class="post-meta-date"><i class="far fa-clock"></i> 15 March 2018</p>
        <h2 style=""><a href="#">Blog Title</a></h2>
      </div>

    </div>
  </li>
</ul>

Answer 1

您在 css 中添加了 (.list) 类，但您忘记在 html 中添加类，

实验。 <ul class="list">