Flex容器
- display
.container{
display:flex | inline-flex;
}
flex:使用块级元素；
inline-flex:行内元素
需要注意的是：当时设置flex布局之后，子元素的float，clear，vertical-align的属性将会失去效果 有六种属性可以设置在容器上
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction
- 默认值row ,主轴为水平方向，起点在左端
- row-reverse,主轴为水平方向，起点在左端
- column:主轴为垂直方向，起点在上沿
- column-reverse:主轴为垂直方向，起点在下沿
flex-warp:决定容器内项目是否换行
- 默认值nowrap：nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。
- warp:：项目主轴总尺寸超出容器时换行，第一行在上方
- wrap-reverse:换行，在第一行下方
flex-flow:flex-direction 和 flex-wrap的简写形式
flex-flow:<flex-direction> || <flex-wrap>
justify-content
- 默认值flex-start左对齐
- flex-end右对齐
- center
- justify-content:space-between:两端对齐，项目之间的间隔相等，即剩余空间等分成间隔
align-itens:定义了项目在交叉轴上的对齐方式
.container{
align-item:flex-start | flex-end | center | baseline | stretch;
}
###Flex项目属性 有六种属性可运用在item项目上
- order
- flex-basis
- flex-grow
- flex-shrink
- flex
- align-self
- order:定义项目在容器中的顺序，数值越小，排列越靠前，默认值为0 ###align-self: 允许单个项目有与其他项目不一样的对齐方式
