我认为当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;
408px;
}
label {
display: block;
150px;
}
input, textarea {
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;
650px;
}
.latest-item {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column;
flex-flow: column;
padding: 14px;
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;
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;
250px;
height: 250px;
padding: 7px;
background: yellow;
}
查看演示：垂直水平居中
参考文章：http://helephant.com/2013/03/29/css3-flexbox-examples/
原文链接：CSS3 flexbox弹性布局实例 版权所有，转载时请注明出处，违者必究。
注明出处格式：前端开发博客 (http://caibaojian.com/flexbox-example.html)
注明出处格式：前端开发博客 (http://caibaojian.com/flexbox-example.html)