輕鬆自定義一個響應式的timeline時間線組件（橫向和縱向）

一、先來看看效果

二、說明
項目中用到的，思路很簡單，就用flex佈局來實現響應式，我這裏就以橫向爲例（豎向的比較簡單就不囉嗦了），後面須要增長單個點選中狀態，添加文字以及觸發各類動畫效果，能夠嘗試加上去，配合vue等框架能夠很容易開發成通用組件。關於更多巧妙的組件封裝，歡迎加入QQ羣，共同討論點此加入，或者438863673

三、上代碼

<!--html代碼--/>
 <div class="container">
        <div style="display:flex;">
            <div style="flex:1;display:flex">
                <div style="flex:1"></div>
                <div class="dot"></div>
                <div class="item"></div>
            </div>
            <div style="flex:1;display:flex">
                <div class="item"></div>
                <div class="dot"></div>
                <div class="item"></div>
            </div>
            <div style="flex:1;display:flex">
                <div class="item"></div>
                <div class="dot"></div>
                <div class="item"></div>
            </div>
            <div style="flex:1;display:flex">
                <div class="item"></div>
                <div class="dot"></div>
                <div style="flex:1;"></div>
            </div>
        </div>
    </div>

css也很簡單

<style>
        .container{
            width: 200px;
            height: 200px;
            border:1px solid red;
        }
        .dot{
            border:2px solid #007Aff;
            width: 5px;
            height: 5px;
            border-radius: 5px;
            background: white;
            margin: auto;
            margin-bottom: -4px;
        }
        .item{
            flex:1;
            border-bottom:1px solid #D84C29;
        }
    </style>

四、總結
是否是夠簡單的? 就用了一下絕對定位和彈性佈局，屏幕大小都能正常顯示。