Flexbox css无序列表自定义样式

Question

我想在下面列出这样的无序列表 Link to what i want to achive
我的结构如下：

<div class="tabs">
 <ul class="tabs__labels">
  <li class="0">
   <a class="active" href="#">
    <img/>
    <div>something</div>
   </a>
  </li>
  <li class="1">
   <a class="" href="#">
    <img/>
    <div>something1</div>
   </a>
  </li>
  ...
 </ul>
</div>

将列表类命名为0,1等是不是一个好主意，并将它们分别设置为以某种方式实现这种效果？如何使用flexbox获得类似的效果？我应该将它们分组成行吗？

Answer 1

这会是一个开始吗？

.tabs__labels {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tabs__labels li {
  flex-basis: 45%;
  margin: 20px 0;
  padding: 0;
}

.tabs__labels li:nth-child(odd) {
  display: flex;
  justify-content: flex-end;
}
.tabs__labels li:nth-child(even) {
  display: flex;
}

.tabs__labels li:nth-child(3),
.tabs__labels li:nth-child(4) {
  flex-basis: 35%;
}

.tabs__labels li a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  border: 1px solid red;
  text-decoration: none;
}

.tabs__labels li:nth-child(1)::before {
  content: 'some text';
  text-decoration: underline;
  margin-right: 10px;  
}

.tabs__labels li:nth-child(2)::after {
  content: 'some text';
  text-decoration: underline;
  margin-left: 10px;  
}

<div class="tabs">
 <ul class="tabs__labels">
  <li>
   <a class="active" href="#">S
   </a>
  </li>
  <li>
   <a class="" href="#">S
   </a>
  </li>
  <li>
   <a class="" href="#">S
   </a>
  </li>
  <li>
   <a class="" href="#">S
   </a>
  </li>
  <li>
   <a class="" href="#">S
   </a>
  </li>
  <li>
   <a class="" href="#">S
   </a>
  </li>
 </ul>
</div>