flex布局相关用法

/* pages/classic/classic.wxss */

.chunk {
    /* 行内元素可设置但是设置了flex，无效了 *//* display: inline-block; */
    width: 100px;
    height: 100px;
}

.colour1 {
    background-color: #5fffff;
    font-size: 26px;
}

.colour2 {
    background-color: #9b12eb;
}

.colour3 {
    background-color: #e65a0a;
}

/* 弹性容器 flex，可以把三个色块自动排列一行 */

.container {
    display: flex;
    /* 设置block是列cloumn排列还是row行排列 ，默认行排列
    而column-reverse,倒叙排列，空白不变
    在行倒叙中，若有空白，则空白也倒叙占位置，但列倒序不变
    是因为容器大小的原因，水平宽>列宽（自适应），可以设置
    high：可以是px也可以是百分比
    width：可以是px也可以是百分比
    */
    flex-direction: row;
    width: 200px;
    height: 600px;
    /* 默认透明 */
    background-color: rgba(153, 153, 153, 0.582);
    /* 主轴与交叉轴，取决于flex-direction */
    /* 改变对齐方向 默认start，其余为center（中间对齐），end，space-between（分散对齐）..
    主轴方向上的对齐
    */
    justify-content:flex-end;

    /* 在flex的内，块居中，aligin交叉轴的对齐
        stretch块没有设置高度时自动拉伸高度
        baseline,块内文字按照第一个块的文字基线(底线)对齐
    */
    align-items:flex-start; 
    /*
    自动换行,nowrap-不换行
    wrpa-换行，会自动产生与下与上相等间距
    方法1：关闭flex容器高度，使其自适应
    */
    flex-wrap:wrap;
    
}