flex

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页面中