flex布局的简单使用

css:

.container {    display: flex;    display: -webkit-flex;    display: -webkit-box;    background: #2b669a;    justify-content: space-between;    -webkit-box-pack: justify;}.container > div {    text-align: center;    background: #b92c28;    color: #fff;    width:12%;}

html:

<div class="container">    <div>一</div>    <div>二</div>    <div>三</div>    <div>四</div>    <div>五</div>    <div>六</div>    <div>日</div></div>

效果：

当然还必须加上：

<meta name="viewport"          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">