小程序之Flex布局

浮动带来的影响

    

    

    



上述布局在标准流下，是依次沿着竖直方向排开的。并且father包裹son布局。
但是，当使用浮动实现son水平布局时，fater将不能包裹son.为了使其能够包裹son，需要实现清除浮动的效果。

flex 伸缩盒（弹性）模式和 flex方向

flex 方向

实现子盒子在父盒子中垂直居中的功能。
1. 传统做法 使用定位 子绝父相
2. 使用flex

 .father{
    border: 1px solid red;
    display:flex; 
    justify-content:center; //水平居中 （主轴对齐） space-between
    align-items:center;  //垂直 居中 （交叉轴对齐）flex-end
}

.son{
    background-color:pink;
    border:1px solid black;
    float:left;
}

flex 换行

  

    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
        
10
    
    

用传统盒子实现首页

效果图：

移动端开发，首先添加如下参数：