使用flexbox列出样式范围和文本

Question

如何创建像图像一样的列表样式？

我想将span推到li元素的左侧。

HTML code：

<ul>
    <li>test<span>3</span></li>
    <li>foo<span>5</span></li>
    <li>bar<span>4</span></li>
</ul>

我目前的风格：

ul{  
    display: flex;
    flex-direction: column;
}

我正在寻找仅使用flexbox而不使用float的解决方案。

Answer 1

使用flexbox而不使用浮动。

ul {
    display: flex;
    flex-direction: column;
    color: #fff;
    font-family: arial;
    list-style: none;
    padding: 0;
    background: #4a90e2;
    border-radius: 5px;
    padding: 6px;
}
ul li {
    background: #285b97;
    border-radius: 3px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    padding: 5px 10px 5px 5px;
    margin: 5px;
}
span {
    display: flex;
    padding: 3px 6px;
    justify-content: flex-start;
    color: #285b97;
    font-size: 10px;
    align-self: flex-start;
    text-transform: uppercase;
    background: #acd2ff;
    border-radius: 2px;
    letter-spacing: 1px;
}

<ul>
    <li>test<span>span</span></li>
    <li>foo<span>span</span></li>
    <li>bar<span>span</span></li>
</ul>

Answer 2

您可以在display: flex上使用li并将span的顺序更改为-1，以便它显示在第一个元素。

＆＃13;

＆＃13;

ul {
  display: flex;
  flex-direction: column;
  background: #4A90E2;
  padding: 10px;
  list-style: none;
}
li {
  display: flex;
  background: #285B97;
  justify-content: space-between;
  align-items: center;
  color: white;
  padding: 10px;
  margin: 5px
}
span {
  background: #ACD2FF;
  order: -1;
  padding: 5px;
  color: #285B97;
}

＆＃13;

<ul>
  <li>li<span>span</span></li>
  <li>li<span>span</span></li>
  <li>li<span>span</span></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以在li代码上设置flexbox布局。

li {
  display: flex;                   /* flexbox */
  flex-direction: row-reverse;     /* orders */
  justify-content: space-between;  /* alignments */
}

span之外的纯文本将呈现为匿名弹性项目。

ul {
  list-style: none;
  padding: 0;
}
li {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

<ul>
  <li>a<span>1</span></li>
  <li>b<span>2</span></li>
  <li>c<span>3</span></li>
</ul>