我正在博客存档页面上尝试 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>
最佳答案
您在 css 中添加了 (.list) 类,但您忘记在 html 中添加类,
实验。 <ul class="list">
关于html - flex 订单不适用于无序列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50266174/