前端基礎學習筆記 彈性盒子模型
基本彈性盒模型演示
div{
display:flex;
width:600px;
border:1px solid red;
}
p{
height:200px;
border:1px solid blue;
}
任何元素都可以設定display:flex;因為所有元素意義上都是盒子
display:inline-flex
和flex的區別 是flex佔據一行,inlineflex佔據自己應該佔據的位置!有點像inlineblock 不支援margin auto,支援textalign
給伸縮容器的屬性
彈性盒模型主要就分為 “伸縮容器”和“伸縮專案” 伸縮容器我們可以簡單的理解為彈性盒模型父元素!反之伸縮專案就是彈性盒模型的子元素!
1. 主軸方向(伸縮流方向) fiex-direction
div{
flex-direction:row; /*預設*/
flex-direction:row-reverse; /*水平反向*/
flex-direction:column; /*豎直*/
flex-direction:column-reverse; /*垂直反向*/
}
2. 交叉軸的方向 flex-wrap 規定伸縮專案是否(子元素)換行
div{ flex-wrap:nowrap; /* 預設 不換行*/ flex-wrap:wrap; /*換行*/ flex-wrap:wrap-reverse; /*反向換行*/ }
flex-flow
fiex-direction 和 flex-wrap 組成一個複合屬性:
div{
flex-flow:row-reverse wrap; /*反向水平 換行*/
}
3. 伸縮專案在主軸對齊方式 justify-content
div{ justify-content:flex-start; /*預設 主軸的起點*/ justify-content:flex-end; /*主軸的終點*/ justify-content:center; /*在主軸的中部對齊!整體居中*/ justify-content:space-between; /*兩端對齊,軸線之間的間隔平均分佈*/ justify-content:space-around; /*每個專案兩側的間隔都相等*/ }
4. 伸縮專案在伸縮容器的單行交叉軸的對齊方式 align-items :單行時候設定
div{
align-items:stretch; /*預設 不設定專案高度的時候佔滿整個容器的高度*/
align-items:flex-start; /*側軸的起點對齊*/
align-items:flex-end; /*側軸的終點對齊*/
align-items:center; /*中間對齊*/
align-items:baseline; /*專案的第一行文字的基線對齊。*/
}
5. 多行伸縮專案 對交叉軸的對齊方式。如果專案只有一根軸線,該屬性不起作用align-content
注意:多行當使用aligncontent 不要和alignitems共存
div{
align-content:stretch; /*預設值 不設定高度的時候軸線佔滿整個交叉軸。*/
align-content:flex-start; /*與交叉軸的起點對齊。*/
align-content:flex-end; /*與交叉軸的終點對齊。*/
align-content:center; /*與交叉軸的中點對齊。*/
align-content:space-between; /*與交叉軸兩端對齊,軸線之間的間隔平均分佈。*/
align-content:space-around; /*每根軸線兩側的間隔都相等。*/
}
給伸縮專案(子級)的屬性
1 order:1; 伸縮專案的排列順序。
order:1;/*預設為0 整數 可以為負值 數值越小,排列越靠 前*/
2 flex-grow: 指定了該專案應該佔用的伸縮容器內的多少空間。
flexgrow:1;預設是0 單位是數字 沒有單位 不支援負值
值為1的時候 佔 一份
其中有一個值為2的時候 大小將是1的兩倍
3 flex-shrink 當Flex專案的總大小大於Flex容器時,Flex專案將縮小以根據編號填充容器。
flexshrink預設屬性為1,當空間不足時,都將等比例縮小。 不支援負值
如果一個專案的flexshrink屬性為0,其他專案都為1,則空間不足時,前者不縮小。
如果所有專案的flexshrink屬性都為1,其中一個專案的flexshrink屬性為3,當空間不足時,為3的
這個專案會縮小的更多,縮小的部分會平分給等於1的盒子
總結:值越小縮小的越少,越大縮小的越多
4 flex-basis 設定專案的初始長度
給flexbasis只是初始值,以後會隨著內容的變化吧盒子撐大
可以理解為盒子的寬度,當我們他的值是auto時,盒子的寬度取決於width
flex-basis:100px; /*預設值為auto:自適應內容撐開*/
5 flex簡寫屬性
flex屬性是flexgrow, flexshrink 和 flexbasis的簡寫,預設值initial可以表示為0 1 auto
flex: auto 它代表 1 1 auto. auto 是有內容的撐開之後,剩下的空間幾個盒子平分!
flex:none 0 0 auto 是內容的寬度! 不放大 不縮小 自動
flex:1 是平分盒子,每個盒子佔多少分之一 代表 1 1 0 放大 縮小 自動.
如果你想讓元素僅僅使用它本身的寬度,比如按鈕,則設定 flex: none,none 將會被解釋為 0 0 auto.
如果想要一個固定大小的元素,則設定 flex: 0 0 size。如:flex 0 0 60px。
如果你想讓元素自動擴充套件到可以利用的空間,如果有多個這種型別的元素,它們可以平均分配空間,則設定flex: auto
6 align-self 屬性允許單個專案與其他專案不一樣的對齊方式
可覆蓋alignitems屬性。預設值為auto,表示繼承父元素的alignitems屬性,如果沒有父元素,則等同於stretch。
flex-start; /*交叉軸的起點對齊。*/
flex-end; /*交叉軸的終點對齊。*/
center; /*交叉軸的中點對齊。*/
baseline; /*專案的第一行文字的基線對齊。*/
stretch; /*(預設值):如果專案未設定高度或設為auto,將佔滿整個容器的高度。*/