CSS3 flexbox弹性布局实例

我认为当flexbox支持所有的浏览器时，由于它比浮动布局更加的简单和强大性，它将彻底的改变我们的CSS布局方式。例如我们可以很容易的写出一个元素在未知比例下的居中对齐布局。当然css3新增的其它属性，例如grid也可以给前端开发带来更多的布局方式。

下面给出一些例子来证明为什么web开发者应该使用flexbox布局。

在前面的文章里面：flexbox基础教程，flexbox完整版教程。我们给出了给出了关于flexbox的许多实际应用：

今天继续分享更多的弹性布局模型，在新的例子中，我们只使用最新的语法display:flex和flex-*相关语法，如果你需要考虑兼容性，可以查看简单版的例子。

多行布局的表单

<form>
<label for="name">Name:</label>
<input id="name" type="text" />
<label for="email">Email:</label>
<input id="email" type="email" />
…
</form>

form{
display: flex;
flex-flow: row wrap;

width: 408px;
}
label {
display: block;
width: 150px;
}
input, textarea {
width: 250px;
margin-bottom: 7px;
}

查看演示：form

图文自动排列

<div>
<div>
<img src="img/news.jpg" alt="CSS3 flexbox弹性布局实例">
<h2>Article title</h2>
<div>…</div>
</div>
<div>
<img src="img/logo.png" alt="CSS3 flexbox弹性布局实例">
<h2>Article title</h2>
<div>…</div>
</div>
…
</div>

.latest-items {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;

width: 650px;
}

.latest-item {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column;
flex-flow: column;

padding: 14px;
width: 255px;
}
.latest-item img {
/*margin: 0 auto;*/
-webkit-align-self: center;
align-self: center;
}

查看演示：图文排列

垂直居中对齐

<body>
<div class="content">
<p>It is extremely difficult…</p>
</div>
</body>

body {
display: -webkit-flex;
display: flex;
flex-flow: column;

-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;

width: 100%;
height: 100%;
background: lightgrey;
}

.content {
/* also making content into a flex box so we can also vertically center its content */
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column;
flex-flow: column;

-webkit-justify-content: center;
justify-content: center;
text-align: center;

width: 250px;
height: 250px;
padding: 7px;

background: yellow;
}

查看演示：垂直水平居中
参考文章：http://helephant.com/2013/03/29/css3-flexbox-examples/

rose_yjh

多行布局的表单

图文自动排列

垂直居中对齐

公告