利用flexbox實現li翻轉顯示

時間 2020-06-14

標籤利用 flexbox 實現翻轉顯示欄目 Flex 简体版

原文原文鏈接

時常遇到要將多個li項翻轉顯示的需求~能夠編寫相應的js來實現~但在支持flexBox佈局的瀏覽器中能夠利用這一佈局的特性巧妙地實現li的翻轉顯示~html

實現以下：（可使用註釋起來的方式快速生成多個li標籤~）瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul {
            display: flex;
            flex-direction: column-reverse;
        }
    </style>
</head>
<body>
    <ul>
        <!-- (li{$})*1000 -->
    </ul>
</body>
</html>

也能夠實現寫好對應的樣式類~在合適的時候經過js在ul上加上這個類~佈局

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。