对弹性布局的简单阐述

弹性布局

display:flex;
不写宽度靠内容撑起来，不写高度，自动扩展最大100%

弹性布局属性

1. flex-decoration:xxx; 决定主轴（项目排列）的方向

              :row   从左至右水平排列 
              :row-reverse  从右至左水平排列
              :column  从上至下垂直排列
              :column-reverse  从下至上垂直排列
   

2. justify-content:xxx;定义了项目在主轴上的对齐方式

             :flex-start  //左对齐
             :flex-end  //右对齐
             :center  //居中
             :space-between  //两端对齐，项目之间间隔相等
             :space-around  //每个项目两侧的间隔相等，所以项目之间的
                              间隔比项目与边框的间隔大一倍

3. align-items:xxx;项目在交叉轴（y轴）上的对齐方式

           :flex-start  //上对齐
           :flex-end  //下对齐
           :center  //居中
           :baseline  //文本基线对齐
           :stretch  //充满，效果不明显

4. flex-wrap:xxx;换行 【有D必有E】

         :nowrap  //不换行
         :wrap  //换行，第一行在上方
         :wrap-reverse  //换行，第一行在下方

5. align-content:xxx;多根轴线的对齐方式

            :flex-start  //与交叉轴起点对齐
            :flex-end  //与交叉轴终点对齐
            :center  //与交叉轴中点对齐
            :space-between  //与交叉轴两端对齐，间隔均匀分布
            :space-around  //轴线两侧的间隔相等，所以轴线之间的
                              间隔>轴线与边框的间隔
            :stretch  //占满，默认

6. align-self:xxx;单个项目不同的排列方式（加给子元素）

        :auto  
        :flex-start  
        :flex-end  
        :center  
        :baseline  
        :stretch 

7. order 定义项目属性的排列顺序 数值越小，排列越靠前，默认为0,（加在子元素上）

 {order:<num>;}  //（可写负值）

8. flex-grow:xxx;项目的放大比例，分配剩余空间，默认为0

  flex-grow:<number>;  //不能写负值

9. flex-shrink:xxx;项目的缩小比例，默认为1

  flex-shrink:<number>;  //不能写负值

10. flex-basis:xxx;在分配多余空间之前，项目占据的主轴空间（main size）是否有多余空间,它的默认值为auto，即项目的本来大小

  flex-basis:<length> | auto;  //可以设为跟width/height等性质相符的属性的值，项目将占据固定空间

11. flex简写

  flex-grow、flex-shrink和flex-basis的简写默认值为  0   1   auto ;  
  flex:auto(1  1  auto)
       none(0  0  auto)
flex:1;  //新语法

---

文中如有不妥之处，欢迎大家留言指正，非常感谢
☀我走得很慢，但我从不后退。加油，奥里给！☀