时间戳

首页 > 解决方案 > 弹性订单不适用于无序列表

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

问题描述

我正在博客存档页面上尝试使用 flex，每页列出最后 8 个条目，并带有侧边栏作为 flex 项目之一 - 总共 9 个项目。侧边栏以正常的弹性顺序首先显示，但我希望它显示第三位（就像侧边栏通常那样）。在侧边栏项目上尝试任何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>

标签： htmlcssflexbox

解决方案

你试过了.list，你的 html() 中不存在，class-"list"所以试试 ul 

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

或添加class-"list"到ul：
HTML：

<ul class-"list">

CSS：

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

推荐阅读