Flex订单无法处理无序列表

Question

我正在博客存档页面上尝试flex，列出每页最后8个条目，侧边栏作为灵活项目之一 - 总共9个项目。侧边栏在正常弹性顺序中首先显示，但我希望它显示第三个（通常是侧边栏）。尝试侧边栏项目上的任何order号码都不会在列表中移动

tf.contrib.data.map_and_batch

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

你用h {.list中不存在的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;
        }

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

<ul>
	<li class="list-item">
	    	1
	</li>
	<li class="list-item">
	    	2
	</li>
	<li class="list-item">
	    	3
	</li>
</ul>

...所以你要引用你没有应用的类的ul元素。

将类添加到ul元素，它将起作用：

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

<ul class="list">
<li class="list-item">
	1
</li>
<li class="list-item">
	2
</li>
<li class="list-item">
	3
</li>
</ul>

Answer 3

你在css中添加了（.list）类，但是你忘了在你的html中添加类，

进出口。 <ul class="list">