微信小程序 ————之flex布局

 

一，开启布局

       代码示例：

.input{

display:flex;  // 开启flex布局

flex-direction: raw;  // 默认为raw(横向)，  column 列表显示为  纵向。

}

二、flex排列

.xxx{
    display:flex;
    flex-wrap: wrap;  // 默认属性 wrap(排列)图 3.2-1
                      //   ，nowrap (拥挤排列) 都排列在一行 （图3.2-2）
    wrap-reverse  排序反转 （图 3.2-3）
}

图 3.2-1

                                                                             

图3.2-2

图 3.2-3

 注意： flex-flow : xx ** ; 代替以上两种（flex-direction 和 flex-wrap）

 

三、justfiy-content属性

   示意： 定义了项目在主轴上的对齐方式。

它其中包含了5个属性值：  flex-start 、flex-end 、 center 、 space-between 、space-around; 

flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

 

未完待续......希望能帮到大家。 记得点赞哦