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/

CSS3 flexbox彈性布局實例

多行布局的表單

圖文自動排列

垂直居中對齊

免責聲明！