Question: Move one element to the end of a list with flexbox

Question

Move one element to the end of a list with flexbox

Answers 2
Added at 2016-12-30 03:12
Tags
Question

How can I move "3" to the end of the list using CSS?

See jsbin here

ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  border: 1px solid black;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.end {
  align-self: flex-end; /* this doesn't work; how can I move 3 to the end? */
}
 <ul>
    <li class="end">3</li>
    <li>1</li>
    <li>2</li>
  </ul>

Answers to

Move one element to the end of a list with flexbox

nr: #1 dodano: 2016-12-30 03:12

Use the order property. In this case, order: 1 works because the other elements have their order set to 0 by default.

ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  border: 1px solid black;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.end {
  order: 1;
}
<ul>
    <li class="end">3</li>
    <li>1</li>
    <li>2</li>
  </ul>

nr: #2 dodano: 2016-12-30 03:12

You can set order - add order:1 on the end element to place it at the end of the list - as we don't specify it for the other flex children they will take the default value of zero.

See demo below:

ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  border: 1px solid black;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.end {
  align-self: flex-end;
  order:1;
}
<ul>
    <li class="end">3</li>
    <li>1</li>
    <li>2</li>
  </ul>

Source Show
◀ Wstecz