基本彈性盒模型演示

div{
    display:flex;
    width:600px;
    border:1px solid red;
}
p{
    height:200px;
    border:1px solid blue;
}

任何元素都可以設定display:flex;因為所有元素意義上都是盒子

display:inline-flex

和flex的區別 是flex佔據一行,inline­flex佔據自己應該佔據的位置!有點像inline­block 不支援margin auto,支援text­align

給伸縮容器的屬性

彈性盒模型主要就分為 “伸縮容器”和“伸縮專案” 伸縮容器我們可以簡單的理解為彈性盒模型父元素!反之伸縮專案就是彈性盒模型的子元素!

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

注意:多行當使用align­content 不要和align­items共存

 

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: 指定了該專案應該佔用的伸縮容器內的多少空間。

flex­grow:1;預設是0 單位是數字 沒有單位 不支援負值 
值為1的時候 佔 一份 
其中有一個值為2的時候 大小將是1的兩倍

3 flex-shrink 當Flex專案的總大小大於Flex容器時,Flex專案將縮小以根據編號填充容器。

flex­shrink預設屬性為1,當空間不足時,都將等比例縮小。 不支援負值 
如果一個專案的flex­shrink屬性為0,其他專案都為1,則空間不足時,前者不縮小。 
如果所有專案的flex­shrink屬性都為1,其中一個專案的flex­shrink屬性為3,當空間不足時,為3的
這個專案會縮小的更多,縮小的部分會平分給等於1的盒子

總結:值越小縮小的越少,越大縮小的越多

4 flex-basis 設定專案的初始長度

給flex­basis只是初始值,以後會隨著內容的變化吧盒子撐大 
可以理解為盒子的寬度,當我們他的值是auto時,盒子的寬度取決於width

flex-basis:100px; /*預設值為auto:自適應內容撐開*/

5 flex簡寫屬性

flex屬性是flex­grow, flex­shrink 和 flex­basis的簡寫,預設值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 屬性允許單個專案與其他專案不一樣的對齊方式

可覆蓋align­items屬性。預設值為auto,表示繼承父元素的align­items屬性,如果沒有父元素,則等同於stretch。

flex-start; /*交叉軸的起點對齊。*/
flex-end; /*交叉軸的終點對齊。*/
center; /*交叉軸的中點對齊。*/
baseline; /*專案的第一行文字的基線對齊。*/
stretch; /*(預設值):如果專案未設定高度或設為auto,將佔滿整個容器的高度。*/

 

.