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