Flex Terms

創建flex container

·display:block|inline|inline-block|none|flex

flex item

·在文檔流中的子元素

flex

·方向

·方向 flex-direction:row|row-reverse|column|column-reverse

·換行 flex-wrap:nowrap|wrap|wrap-reverse

·flex-flow:<'flex-direction'>||<'flex-wrap'>

·order:<interger> initial:0

·彈性

·flex-grow:<number>

·inital:0

·設置元素可以分配到的空余的空間比例

·flex-shrink:<number>

·initial:1

·設置元素可以分配到的負空余的空間比例

·flex-basis:main-size|<width>

·設置flex item的初始寬/高

彈性元素的寬度：

flex-basis + flow-grow/sum(flow-grow)*remain

剩余空間為負：flex-basis + flow-shrink/sum(flow-shrink)*remain

·flex:<'flex-grow'>||<'flex-shrink'>||<'flex-basis'>

·initial:0 1 main-size

·對齊

·justify-content:flex-start|flex-end|center|space-between|space-around

·設置main-axis方向上對齊方式

·like text-align

·align-items:flex-start|flex-end|center|baseline|stretch

·設置cross-axis方向上對齊方式

·like vertical-align

·align-self:auto|flex-start|flex-end|center|baseline|stretch

·設置單個flex item在cross-axis方向上對齊方式

·align-content:flex-start|flex-end|center|space-between|space-around|stretch

·設置cross-axis方向上行對齊方式

?三行兩列自適應布局

flex ie9及以下不支持，目前主要用于移動web頁面中