微信小程序之view的flex布局(2)

上一章即微信小程序之view的flex布局(1)里，我们学习了flex容器的属性，总结一下它里面包括

(1)flex-direction 设置容器内子元素即flex-item的排列方向。

(2)flex-warp 设置容器内子元素是否换行。

(3)justify-content 设置子元素在横轴即X轴的排列位置

(4)align-items 设置子元素在Y轴的排列位置

(5)align-content 设置子元素在多个主轴线上排列的位置。

下面我们来讲讲 flex-item的属性，在flex容器中，每个子元素就是一个flex-item

如果item没有设置order，则order默认为0，如图我设置了view2,3,4的位置为3,2,1 看效果图：

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。效果看图：

因为设置了view3，4设置了left-align属性 ，所以没有均分，大家可以去掉尝试一下。

直接上图  

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
资料地址     demo 地址

    自媒体查询、rem布局、响应式布局技术，是三个不同的技术。 自媒体查询 常用在适配不同的设备显示场景下，根据屏幕大小显示不同页面，但功能大致不变的这么一个技术。 rem布局 它是一个长度单位，这个长度单位是根据‘根元素’的字体大小的单位确定的（根元素字体大小 = 1rem）。 响应式布局 它是在页面宽度改变时，整个页面或者页面中的局部随着页面的缩放进行响应并实时变化（ 响应式布局和自媒体查询有区别 ）。在如今复杂的开发中这几个技术越来越密不可分，在项目中可以通过实际需求进行搭配。
        功能： 自媒体查询主要是设置不同的设备屏幕下的显示样式。 

        获取浏览器或设备宽度：

                    min-device-width （设备的宽度）\   min-width  (浏览器的宽度)   （注释：也可以获取高度，就是将width改写成height）

        方法：

                    

         功能：   就是使用flex对页面进行布局，也可以是响应式的。

          方法：    一下方法为flex常用方法，具体学习可以点击链接   flex布局
        概念： 指相对跟元素的字体大小的单位。（补充：rem于em的区别一个是以根元素字体大小为参考，em是以父级元素为参考）

        使用方法：

                一般使用媒体查询+rem或js,在不同宽度的窗口下自动调节字体大小。
布局特点： 不同设备对应不同的HTML或者局部自适应。（不同的设备不同的页面）
        布局特点：确保一个页面在所有终端上，都能显示出令人满意的效果。（一套方案，处处运行。）

        设计思路：使用自媒体查询及用 % 或 rem 作为单位，对不同视口设备进行编写样式。
            布局特点：为了保证在各种屏幕上得不失真，就要根据实际屏幕宽度做等比换算。（一套方案，是不同尺寸、分辨率的视口呈现出较好的效果。）

             设计思路：使用自媒体查询及用 % 或 rem 作为单位，对不同视口设备进行编写样式。
总结：

        在项目开发中，根据项目的实际情况选择不同的技术的搭配，这样才能实现业务的效果。

flex本身做游戏就不是很理想，只能是作为as 3的一个方便的编辑器。
做游戏的话，我推荐看《AS 30 游戏编程大学》或者《AS 编程指南》；还有老外的俩本书忘记书名了《as 动画教程》和《as高级动画教程》（名字我不确定，但是记得高级封面有个长颈鹿的头）。
当然，前提是你有基本的计算机基础。

private static final String Driver="commicrosoftsqlserverjdbcSQLServerDriver";
private static final String URL="jdbc:sqlserver://localhost:1433;databaseName=company";
private static final String UserName="sa";
private static final String UserPass="sqlpass";
public static Connection getCon(){

Connection con = null;
try {
ClassforName(Driver);
con=DriverManagergetConnection(URL,UserName,UserPass); //连接数据库
} catch (Exception e) {
// TODO Auto-generated catch block
eprintStackTrace();
}
return con;
}
你把url改成mysql的就行了
还有把mysql的jar复制到lib文件下。

---