Flexbox布局（2）

接上一篇下一篇Flexbox布局（1）。
在需要左右放置内容的情况下（下图布局效果），往常都是用float，这个float恶心的很，需要float: left，float: right，然后再clear: both。不仅麻烦，并且常常左右内容不能水平对齐。

这个时候，css3的flex布局的优越感油然而生。下面使用flex来实现以下图中的效果。
不多解释了，直接代码中注释了。

<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>
    .site-header {
        background: #56727C;

        /**
         * 声明flexbox，现在.site-header是一个flexbox了。默认情况下，子元素水平摆放
         */
        display: flex;

        /**
         * 子元素之间填充空间，使子元素填满这个flexbox。
         */
        justify-content: space-between;
    }
    .site-header .site-header-section {
        display: flex;
        /**
         * 每个子元素的竖直中间位置放在flexbox的main axis。就像串糖葫芦一样。
         */
        align-items: center;
        margin: 10px 15px;
        padding: 2px 5px;
        color: white;
    }
    .site-header .site-header-section .site-header-section-item {
        margin: 0 15px;
        padding: 2px 5px;
        cursor: pointer;
    }
    .site-header-logo {
        font-size: 20px;
        color: white;
    }
    .site-header-item-selected {
        color: #FFFFFF;
        background-color: #415F69;
        border-radius: 4px;
    }
</style>

<div class="site-header">
    <div class="site-header-section">
        <div class="site-header-section-item site-header-logo"><div class="fa fa-inbox"></div></div>
        <div class="site-header-section-item site-header-item-selected">home</div>
        <div class="site-header-section-item">about</div>
        <div class="site-header-section-item">others</div>
    </div>
    <div class="site-header-section">
        <div class="site-header-section-item">settings</div>

    </div>
</div>

<script>
    $('.site-header-section-item').click(function (e) {
        $('.site-header-section-item').removeClass('site-header-item-selected');
        $(this).addClass('site-header-item-selected');
    });
</script>

下一篇Flexbox布局（3）