展示历史事件布局

记录下这个布局的实现吧
中间的线是背景图片，由一张很小的线的图片在y轴重复而成

background: url(./../images/solid.jpg) repeat-y center center;

左边的内容左浮动，文字居右对齐
右边的内容右浮动，文字居左对齐
中间的方块是绝对定位上去的
每个li的宽度用百分比在响应式中也毫无压力

.stage-event-box li.fr {
    text-align: left;
    float: right;
}
.stage-event-box li.fl {
	float: left;
    text-align: right;
}
.stage-event-box li {
    width: 50.5%;
}
.stage-event-box li.fr .sm-square {
    position: absolute;
    left: 0;
    top: 0;
}
.stage-event-box li.fl .sm-square {
    position: absolute;
    right: 0;
    top: 0;
}

不知道flex可不可以实现这个布局。。。。。