CSS3 flexbox弹性布局实例
生活随笔
收集整理的這篇文章主要介紹了
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"> <h2>Article title</h2> <div>…</div> </div> <div> <img src="img/logo.png"> <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弹性布局实例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 美国洛杉矶在哪个州
- 下一篇： 洋气好听的教育培训机构名字大全，教育机构