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>

POPULAR ONLINE

Is it possible to receive callback response in function

Learn, Share, Build

binary file of the helloworld.go generated by Grumpy does not get generated

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

CSS

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

CSS

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

jQuery

how to add an array element to itself using jquery

I have this particular code

560