sublime编辑器
电脑
1.创建一个练习项目；来查看编辑效果；详见验证说明；
2.说明现在定义一个父元素盒子box并定义为一个弹性容器==display:背景设置紫色其在box放置的子元素定义为child盒子50*50。这下来组合看看在父元素属性的了解及其具体的作用及效果是怎样的？（child背景设置橙色,child盒子暂不设flex相关属性）
3.文件初始设定如下：
4.纯组合：说明box设置display:flex时;默认将其自带的div==magin/padding时就为0;（都没有设宽高属性，靠自填充；） 在其里面的child更好的贴合父容器;child类似于浮动过去的，单独一个并不会填满box;child默认水平排列； 这样就可以联想到其的flex-direction的设置属性了；排列方向的设置 .box{ display: flex; background-color:pink; } .child{ background-color: orange; /*width:50px; height:50px;*/ color:#fff; }
5.验证实例： 给child设置margin:0.2em;以便查看；看出其默认子元素为默认不换行排列；这样就可以联想到其的flex-wrap的设置属性了； 1.多个子元素还未超出box时；box未设置宽高，窗口改变时，其默认子元素并未响应跟随改变，类似子元素相对其定位了一样;2..多个子元素足够超出box时；
6.现在看看display取值为inline-flex;看看与flex有和区别；说明flex定义类似块级弹性容器元素，inline-flex定义类似为内联元素级弹性容器元素
7.以上因其flex设置的类似样式的形式，所以在里面设置的 多列组中所有column-*属性、float、clear属性和vertical-align属性在Flex容器上可能看起来没有作用，因为其可能已自带了；
8.最终效果图：手机和pad或pc