CSS_弹性盒子模型
一.定義
彈性盒子是 CSS3 的一種新的布局模式
CSS3 彈性盒是一種當頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時 確保元素擁有恰當?shù)男袨榈牟季址绞?/p>
引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容 器中的子元素進行排列、對齊和分配空白空間
CSS3彈性盒內(nèi)容
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成 彈性容器通過設(shè)置 display 屬性的值為 flex 將其定義為彈性容器 彈性容器內(nèi)包含了一個或多個彈性子元素
注意：
彈性容器外及彈性子元素內(nèi)是正常渲染的。彈性盒子只定義了 彈性子元素如何在彈性容器內(nèi)布局
默認彈性盒里內(nèi)容橫向擺放
二.彈性盒子屬性
父元素(彈性容器)上的屬性
-
display屬性
display: flex;：開啟彈性盒， 屬性設(shè)置后子元素默認水平排列
-
flex-direction屬性
flex-direction 屬性指定了彈性子元素在父容器中的位置
語法
flex-direction: row | row-reverse | column | column-reverse-
row：橫向從左到右排列（左對齊），默認的排列方式
-
row-reverse：反轉(zhuǎn)橫向排列（右對齊，從后往前排，最后一項 排在最前面
-
column：縱向排列
-
column-reverse：反轉(zhuǎn)縱向排列，從后往前排，最后一項排在 最上面
-
-
justify-content屬性
內(nèi)容對齊（justify-content）屬性應(yīng)用在彈性容器上，把彈性項沿 著彈性容器的主軸線（main axis）對齊
語法
justify-content: flex-start | flex-end | center-
flex-start：彈性項目向行頭緊挨著填充。這個是默認值。第一個彈性項的main-start外邊距邊線被 放置在該行的main-start邊線，而后續(xù)彈性項依次平齊擺放
-
flex-end：彈性項目向行尾緊挨著填充。第一個彈性項的main-end外邊距邊線被放置在該行的 main-end邊線，而后續(xù)彈性項依次平齊擺放
-
center：彈性項目居中緊挨著填充。（如果剩余的自由空間是負的，則彈性項目將在兩個方向上同 時溢出）
-
-
align-items屬性
align-items 設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸）方向上的對齊方 式
語法
align-items: flex-start | flex-end | center-
flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界
-
flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界
-
center: 彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的 尺寸，則會向兩個方向溢出相同的長度）
-
子元素上的屬性
flex
根據(jù)彈性盒子元素所設(shè)置的擴展因子作為比率來分配剩余空間 默認為0，即如果存在剩余空間，也不放大 如果只有一個子元素設(shè)置，那么按擴展因子轉(zhuǎn)化的百分比對其分配 剩余空間。0.1即10%，1即100%，超出按100%
三.實例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 500px;height: 500px;background-color: antiquewhite;display: flex; ? /*開啟彈性盒子屬性，子元素排列默認為水平*/flex-direction: row; /*默認為row 水平擺放*/justify-content: center;align-items: center;}.box1 {width: 100px;height: 100px;background-color: red;flex: 3;}.box2 {width: 100px;height: 100px;background-color: green;flex: 1;}.box3 {width: 100px;height: 100px;background-color: blue;flex: 1;}</style> </head> <body><div class="box"><div class="box1"></div><div class="box2"></div><div class="box3"></div></div> </body> </html>?
總結(jié)
以上是生活随笔為你收集整理的CSS_弹性盒子模型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微软android studio,And
- 下一篇： CSS 基本样式