web-dev-qa-db-ja.com

CSS3を使用してリストアイテムの順序を変更することはできますか？

CSS3を使用してリストアイテムの順序を変更することはできますか？

たとえば、リストがHTMLで1、2、3、4、5の順序でコード化されているが、5、1、2、3、4の順序で表示したい場合。

CSSオーバーレイを使用してFirefox拡張機能を変更しているので、HTMLを変更するだけではできません。

HTMLコード

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
htmlcssfirefoxfirefox-addon
11
RockPaperLizard

フレックスボックスを使用してそれを行うことができます。

ここに私があなたのために作成したフィドルがあります： 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>

Csstricksによると：

Orderプロパティは、フレキシブルボックスレイアウトモジュールのサブプロパティです。

Flexアイテムは、デフォルトでソースドキュメントに表示されるのと同じ順序で表示されます。

Orderプロパティを使用して、この順序を変更できます。

構文：

注文：number

それが役に立てば幸い。乾杯！

24
devhermluna

単に逆にする必要がある場合は、次を使用します。

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

はい、フレキシブルボックスモデルのorder cssプロパティを使用できます。親要素にはdisplay:flex セットする

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>

また、すべてのブラウザがここで概説されているフレキシブルボックスモデルをサポートしているわけではないことにも注意してください... http://caniuse.com/#feat=flexbox

ただし、古いブラウザをサポートする必要がある場合に、古いブラウザをサポートするために使用できるポリフィルがかなりあります。

2
Leo