Flexbox布局（5）

接上一篇flexbox布局（4）展示了flexbox的完美居中能力。flexbox还可以轻松实现颠倒排列的效果。
实现下面效果：

• flex-direction: row-reverse 是flexbox中的子元素倒序排列。

<link href="http://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>

<style>
    .feature-list {
        width: 500px;
        border: 1px solid lightgrey;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .feature-list-item {
        width: 80%;
        display: flex;
        color: #86969C;
        padding: 20px;
        align-items: center;
    }
    .feature-list-item-revrse {
        flex-direction: row-reverse;
    }
    .feature-list-item-icon, .feature-list-item-description {
        padding: 5px 15px;
    }
    .feature-list-item + .feature-list-item {
        border-top:1px solid lightgrey;
    }
    .feature-list-item-icon {
        font-size: 60px;
        line-height: 0;
    }
</style>

<div class="feature-list">
    <div class="feature-list-item">
        <div class="feature-list-item-icon">

            <div class="icon fa fa-calendar"></div>
        </div>
        <div class="feature-list-item-description">You can get notified by email or SMS.dsgfsdfsdfsdfsdfsdf</div>
    </div>
    <div class="feature-list-item feature-list-item-revrse">
        <div class="feature-list-item-icon">

            <div class="icon fa fa-calendar"></div>
        </div>
        <div class="feature-list-item-description">You can get notified by email or SMS.</div></div>
    <div class="feature-list-item">
        <div class="feature-list-item-icon">

            <div class="icon fa fa-calendar"></div>
        </div>
        <div class="feature-list-item-description">You can get notifiedsdfsdfsdfsdfsdfsdfsf.</div>
    </div>
</div>

下一篇flexbox布局（6）