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）