flex语法与布局

Flex语法

---

Flex

Flex作CSS3加入的弹性盒子。

.box{
	display:flex
	display:inline-flex
	display:-webkit-flex /*Safari Chrome*/
}

Flex的属性

1. flex-flow
flex-flow:<flex-direction>||<flex-wrap>
   例子：

• flex-flow:row nowrap行排序、不换行
• flex-flow:column wrap列排序、换行

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

• space-between
  两侧贴边、项目间间隔相等。
• space-around
  每两个项目之间间隔相等。

3. align-items
align-items:flex-start|flex-end|center|strench|baseline
   
4. order属性
   决定顺序
5. flex属性
   flex:none|[<flex-grow> <flex-shrink> | <flex-basic>]
6. 其他属性
   align-self不受到align-items影响
   align-content多轴线对其