CSS3를 사용하여 목록 항목의 순서를 변경할 수 있습니까?

Question

CSS3를 사용하여 목록 항목의 순서를 변경할 수 있습니까?

예를 들어 목록이 1,2,3,4,5 순으로 HTML로 코딩되었지만 5,1,2,3,4 순서로 표시되도록합니다.

Firefox 확장을 수정하기 위해 CSS 오버레이를 사용하고 있으므로 HTML 만 변경할 수 없습니다.

HTML 코드

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

Answer 1

당신은 인 flexbox를 사용 할 수 있습니다.

여기 당신을 위해 만든 바이올린는 다음과 같습니다 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 속성을 사용할 수 있습니다.

구문 :

순서 :

number 그것이 도움이되기를 바랍니다. 건배!

Answer 2

예. 유연한 상자 모델의 order CSS 속성을 사용할 수 있습니다. http://caniuse.com/#feat=flexbox이

그러나,이 있습니다 ... 부모 요소가 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>

또한

여기에 설명 된대로 모든 브라우저가 유연한 상자 모델을 지원한다는 인식을 설정해야합니다주의하십시오 꽤 많은 polyfill을 사용하면 이전 브라우저를 지원해야하는 경우 구형 브라우저를 지원할 수 있습니다