List style with flexbox

487
February 12, 2017, at 5:39 PM

How can I create a ul>li>span style something like image blow? I wanna push span to the left of li element.

HTML Code:

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

my current style:

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

I'm looking for solution with only flexbox and without using float:left;

thanks.

Answer 1

With flexbox and without float.

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

You can use display: flex on li and change order of span to -1 so it shows at first element.

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; 
}
<ul> 
  <li>li<span>span</span></li> 
  <li>li<span>span</span></li> 
  <li>li<span>span</span></li> 
</ul>

Rent Charter Buses Company
READ ALSO
Bootstrap counters in multiple columns

Bootstrap counters in multiple columns

I'm looking for a bootstrap code snippet to implement the animated incremental counters shown at the end of this template

428
Jekyll: How do I change the coloring scheme of inline code written in Markdown?

Jekyll: How do I change the coloring scheme of inline code written in Markdown?

I don't mean syntax highlighting in code blocks but rather inline code like: this is an inline codeI think it might have to do with the _sass folder css files, but I can't find a specific code in this repository I forked that would change the coloring...

302
select2 dropdown overlapping on remodal

select2 dropdown overlapping on remodal

When I try to use select2 and remodal together, select2 dropdown is overlapping on remodal frameI tried to change z-index of both but I failed to make it work

528