flex布局

应用在flex container上的CSS属性

1. flex-direction

display:flex(块级元素)

display:inline-flex(行内元素)

1. Justify-content

   决定flex items在main axis上的对齐方式

   flex-start(默认值)：与main start对齐；

   flex-end:与main end对齐；

   center:居中；

   space-between:两端对齐，中间平分；

   space-evenly:直接平分；

   space-around:两边距离是中间距离的一半；

   1. align-items

决定flex items在交叉轴上的对齐方式

normal: 当高度为0时，自动拉伸填充整个flex-container;

baseline:与基准线对齐；

4.  #### flex-wrap
    
    默认情况下，所有的flex-items会在同一行显示，当显示不下时会压缩item的宽度
    
    nowrap(默认值)：不换行
    
    wrap 换行显示；
    
    5.  flex-flow是flex-direction||flex-wrap 的缩写
        
    6.  #### align-content:
        
        多行flex items在交叉轴上的对齐方式；
        
    
    ### 应用在flex items上的CSS属性
    
5.  order:设置任意整数，值越小排在越前面
    
6.  align-self:会覆盖父元素中align-items设置的属性；
    
7.  flex-grow;默认值0
    
8.  flex-shrink:缩小，默认值为1
    
9.  flex-basis:决定main axis上的宽度，当已设置宽度时，flex-basis能将其覆盖，
    
10.  flex是flex-grow||flex-shrink||flex-basis的缩写；