CSS3 flexbox彈性佈局實例

我認爲當flexbox支持全部的瀏覽器時，因爲它比浮動佈局更加的簡單和強大性，它將完全的改變咱們的CSS佈局方式。例如咱們能夠很容易的寫出一個元素在未知比例下的居中對齊佈局。固然css3新增的其它屬性，例如grid也能夠給前端開發帶來更多的佈局方式。css

下面給出一些例子來證實爲何web開發者應該使用flexbox佈局。html

在前面的文章裏面：flexbox基礎教程，flexbox完整版教程。咱們給出了給出了關於flexbox的許多實際應用：前端

今天繼續分享更多的彈性佈局模型，在新的例子中，咱們只使用最新的語法display:flex和flex-*相關語法，若是你須要考慮兼容性，能夠查看簡單版的例子。css3

多行佈局的表單

<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;
}

查看演示：formweb

圖文自動排列

<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/ide