reverse list item

反转列表元素

by basecss

HTML

<div class="box box1">
    <p>手动升序</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<div class="box box2">
    <p>手动降序</p>
    <ul>
        <li>4</li>
        <li>3</li>
        <li>2</li>
        <li>1</li>
    </ul>
</div>
<div class="box box3">
    <p>transform 降序</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<div class="box box4">
    <p>column-reverse</p>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

CSS

.box {
    border: 2px solid #ddd;
    margin: 5px;
    padding: 5px;
    font-size: 16px;
}
.box p {
    margin: 3px 0;
    border-bottom: 1px dashed #ddd;
}
.box3 ul {
    -webkit-transform: rotate(180deg);
}
.box3 li {
    -webkit-transform: rotate(-180deg);
}

.box4 ul {
    display: flex;
    flex-direction: column-reverse;
}
.box4 li {
    display: flex;
}