Flexible Layout Box Model
常見的布局模型 Layout Model
- block-layout
- inline-layout
- table-layout
- positioned-layout
- flexible-box-layout
- grid-layout
flex盒子
image.png
display屬性
display:flex
flex容器屬性
flex容器屬性 flex-direction
定義子元素在主軸的排列方向
- row
- row-reverse
- column
- column-reverse
flex-direction row
row是默認值
image.png
flex-direction row-reverse
image.png
flex-direction column
image.png
flex-direction column-reverse
同理,由下到上
flex容器屬性 flex-wrap
元素的換行
- nowrap
- wrap
- wrap-reverse
flex-wrap: nowrap
nowrap是默認值,此時,它的子元素寬度將不完全生效,會擠一擠
image.png
flex-wrap: wrap
li{
width:150px
}
image.png
flex-wrap: wrap-reverse
image.png
flex容器屬性-*flex-flow
復合屬性
flex-flow: flex-direction flex-wrap
flex容器屬性-align-content
控制容器內多行在交叉軸上的排列方式
- flex-start
- flex-end
- center
- stretch
- space-between
- apace-around
必須要換行
flex-wrap: wrap
align-content: flex-start
image.png
align-content: flex-end
image.png
align-content: center //中間
align-content: stretch //拉伸
image.png
align-content: space-between
image.png
align-content: space-around
image.png
flex容器屬性-justify-content
子元素在主軸上的對齊模式
- flex-start
- flex-end
- center
- space-between
- space-around
justify-content: flex-start //默認值
justify-content: center
image.png
justify-content: center
image.png
justify-content: space-around
image.png
justify-content: space-between
image.png
flex容器屬性-align-items
子元素在交叉軸上的對齊模式
- flex-start
- flex-end
- center
- baseline
- stretch
align-items: flex-start //默認
align-items: flex-end
image.png
align-items: center
image.png
align-items: baseline
以內容的基線對齊
image.png
align-items: stretch
image.png
伸縮項目屬性
Flex子元素屬性-order
控制子元素出現(xiàn)在父容器的順序
- 0 默認值
- 任何整數(shù)
// flex子元素
order: 1
Flex子元素屬性-flex-grow
將剩余空間劃分給子元素,也就是說對內容以外的空間進行平均分配的,設置為同一個值,將等分
- 0 //默認值
- 數(shù)字(不能為負數(shù))
flex-grow: 1
Flex子元素屬性-flex-shrink
用于設置彈性容器中項目的收縮比率,默認值為1
- 1 //默認值,默認等比壓縮
- 數(shù)字(不能為負數(shù))
flex-shrink: 0 // 將不會被壓縮
Flex子元素屬性-flex-basis
計算前刨去的空間,默認值為auto
- auto
- [width]
- 0
flex-basis: 10rem
伸縮項目分配的空間 = 伸縮容器的空間 - basis設置的空間 - 內容所占空間
image.png
flex-basis: auto //默認值
flex-basis: 0
image.png
image.png
Flex子元素屬性-*flex
伸展(flex-grow),收縮(flex-shrink),基準(flex-basis)
- 1 0 auto
- none
- 0
flex: 1
等同于
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
Flex子元素屬性-align-self
采取本身的對齊方式
- flex-start
- flex-end
- center
- baseline
- stretch
image.png
