轻松自定义一个响应式的timeline时间线组件（横向和纵向）

1、先来看看效果

2、说明
项目中用到的，思路很简单，就用flex布局来实现响应式，我这里就以横向为例（竖向的比较简单就不啰嗦了），后面需要增加单个点选中状态，添加文字以及触发各种动画效果，可以尝试加上去，配合vue等框架可以很容易开发成通用组件。关于更多巧妙的组件封装，欢迎加入QQ群，共同讨论点此加入，或者438863673

3、上代码

<!--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>

4、总结
是不是够简单的? 就用了一下绝对定位和弹性布局，屏幕大小都能正常显示。