0

I want to align the item with class test a the end of the page, at the right, and the first 3 list items to set at the start of the page (left side). How to do this with display flex?

ul{
  border:1px solid red;
  display:flex;
  list-style-type: none;

}

li {
  border: 1px solid green;
}

.test {
  float: right;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li class='test'>test</li>
</ul>
Asking
  • 3,487
  • 11
  • 51
  • 106

2 Answers2

1

Here you go

ul{
  border:1px solid red;
  display:flex;
  justify-content: flex-start;
  list-style-type: none;
}

li {
  border: 1px solid green;
}

.test {
  margin-left: auto;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li class='test'>test</li>
</ul>
Fatur Rahman S
  • 341
  • 1
  • 3
  • 10
0

just assign margin left auto to test element.

ul{
  border:1px solid red;
  display:flex;
  list-style-type: none;
}

li {
  border: 1px solid green;
}
.test{
    margin-left:auto;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li class='test'>test</li>
</ul>
Tahir Shahzad
  • 649
  • 7
  • 18