深入理解弹性盒布局（fiex-box）——Web前端系列自学笔记
文章目錄
- 彈性盒布局
- 彈性盒布局概述
- 彈性盒布局屬性
- display
- flex-flow
- justify-content
- align-items
- order
- flex
- align-self
- 總結(jié)
- 彈性盒布局小案例
- 實(shí)現(xiàn)效果圖
- 使用彈性盒布局建設(shè)個(gè)人社交網(wǎng)站
彈性盒布局
彈性盒布局概述
說(shuō)到響應(yīng)式，就不得不提CSS3中的彈性盒布局了，它可以輕松的創(chuàng)建響應(yīng)式網(wǎng)頁(yè)布局，為盒狀模型增加靈活性。
CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類(lèi)型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?br /> 引入彈性盒布局模型的目的是提供一種更加有效的方式來(lái)對(duì)一個(gè)容器中的子元素進(jìn)行排列、對(duì)齊和分配空白空間。
彈性盒改進(jìn)了塊模型，既不使用浮動(dòng)，也不會(huì)在彈性盒容器與其內(nèi)容之間合并外邊距，是一種非常靈活的布局方法。
彈性盒布局屬性
display
display用于指定彈性盒的容器，其值可以為flex；
如果為行內(nèi)元素，值為inline-flex。
flex-flow
flex-flow 是屬性 flex-direction 和 flex-wrap 的簡(jiǎn)寫(xiě)，用于排列彈性子元素。
justify-content
justify-content屬性能夠設(shè)置子元素如何在當(dāng)前軸方向的排列，其取值如下表所示。（在主軸上如何對(duì)齊 ）
align-items
align-items屬性用于設(shè)置子元素在垂直于軸的方向上的排列，其取值如下表所示。（在交叉軸上如何對(duì)齊 ）
舉例：
order
order屬性用于設(shè)置子元素出現(xiàn)的順序。
order允許我們自定義項(xiàng)目的排列順序，默認(rèn)為0，屬性值是數(shù)字，數(shù)值越小越靠前，有點(diǎn)類(lèi)似我們優(yōu)先隊(duì)列中的優(yōu)先級(jí)
舉例：
flex
flex屬性是flex-grow（擴(kuò)展比率）， flex-shrink（收縮比率）和flex-basis（寬度，像素值） 的縮寫(xiě)，能夠設(shè)置子元素的伸縮性。
舉例：
align-self
align-self屬性能夠覆蓋容器中的align-items屬性，用于設(shè)置單獨(dú)的子元素如何沿著縱軸排列。
其取值有auto|flex-start|flex-end|center|baseline|stretch，每個(gè)值的意義與align-items屬性的取值類(lèi)似。
舉例：
總結(jié)
彈性盒布局小案例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>彈性盒屬性</title> </head> <style type="text/css">.box {min-height: 200px;display: flex;/*指定彈性盒的容器*//*flex-direction: row|row-reverse|column|column-reverse;flex-wrap: nowrap|wrap|wrap-reverse;*/flex-flow: row;/*彈性盒子元素按橫軸方向順序排列*/justify-content: center;/*設(shè)置彈性盒子元素向行中間位置對(duì)齊*/align-items: flex-end;/*彈性盒子元素向垂直于軸的方向上的中間位置對(duì)齊*/background-color: gray;}.A,.B,.C {background-color: white;border:1px solid gray;}.box div.A {order: 1;/*order設(shè)置該子元素出現(xiàn)的順序*/flex-grow: 0;/*擴(kuò)展比率*/flex-shrink: 1;/*收縮比率*/flex-basis: auto;/*寬度，像素值*/align-self: center;/*該子元素在該行的縱軸上居中放置。*/}.box div.B {order: 2;flex: 0 1 auto;/*擴(kuò)展比率0、收縮比率1和寬度居中的縮寫(xiě)形式*/align-self: center;}.box div.C {order: 3;flex: 0 1 auto;align-self: center;} </style> <body> <div class="box"><div class="A">A</div><div class="B">B</div><div class="C">C</div> </div> </body> </html>實(shí)現(xiàn)效果圖
使用彈性盒布局建設(shè)個(gè)人社交網(wǎng)站
彈性盒布局綜合案例：深入理解彈性盒布局之實(shí)現(xiàn)個(gè)人社交網(wǎng)站——Web前端系列自學(xué)筆記
總結(jié)
以上是生活随笔為你收集整理的深入理解弹性盒布局（fiex-box）——Web前端系列自学笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 用HTML和CSS实现一个漂亮的个人博客
- 下一篇： 【附全部代码+图片】使用HTML5+CS