web-dev-qa-db-fra.com

Est-il possible de changer l'ordre des éléments de la liste en utilisant CSS3?

Est-il possible de changer l'ordre des éléments de la liste en utilisant CSS3?

Par exemple, si une liste est codée en HTML dans l'ordre 1, 2, 3, 4, 5 mais que je souhaite qu'elle s'affiche dans l'ordre, 5,1,2,3,4.

J'utilise un calque CSS pour modifier une extension Firefox, je ne peux donc pas simplement changer le code HTML.

Code HTML

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

htmlcsscss3firefoxfirefox-addon
7
RockPaperLizard

Vous pouvez le faire en utilisant flexbox.

Voici un violon que j'ai créé pour vous: https://jsfiddle.net/x56hayht/

ul {
  display: flex;
  flex-direction: column;
}
ul li:first-child {
  order: 5;
}
ul li:nth-child(2) {
  order: 4;
}
ul li:nth-child(3) {
  order: 3;
}
ul li:nth-child(4) {
  order: 2;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Selon csstricks:

La propriété order est une sous-propriété du module Layout Flexible Box.

Les éléments Flex sont affichés dans le même ordre dans lequel ils apparaissent dans le document source par défaut. 

La propriété order peut être utilisée pour modifier cet ordre.

Syntaxe:

ordre: number

J'espère que ça aide. À votre santé!

17
devhermluna

Oui, vous pouvez utiliser la propriété order css du modèle de boîte flexible. Sachez que l'élément parent doit avoir display:flex set

ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  
  -moz-flex-flow: wrap;
  -webkit-flex-flow: wrap;
  flex-flow: wrap;
}
ul li {
  width: 100%
}
ul li:nth-of-type(1) {
  order: 2;
}
ul li:nth-of-type(2) {
  order: 3;
}
ul li:nth-of-type(3) {
  order: 4;
}
ul li:nth-of-type(4) {
  order: 5;
}
ul li:nth-of-type(5) {
  order: 1;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Sachez également que tous les navigateurs ne prennent pas en charge le modèle de boîte flexible décrit ci-dessous ... http://caniuse.com/#feat=flexbox

Cependant, il y a pas mal de polyfill que vous pouvez utiliser pour supporter les navigateurs plus anciens si vous avez besoin de supporter les navigateurs plus anciens

2
Leo

Si vous avez juste besoin d'inverser, utilisez:

ul {
    display: flex;
    flex-direction: column-reverse;
}
1
a_vedenin