小程序学习之小程序框架--flex布局

1.基本概念

1）flex模型   当页面需要适应不同屏幕尺寸以及设备类型时该模型可以确保元素在恰当的位置

2）容器和项目  用于包含内容的组件是容器，容器内部组件是项目。容器允许包含嵌套。

3）坐标轴   默认水平布局，水平从左向右是主轴，垂直从上到下是交叉轴。可用flex-direction:column互换两轴位置

4）flex属性

• 容器属性

• 项目属性

2.容器属性

1）flex-direction  设置主轴方向，规定项目的排列方向

• row    默认值，水平方向从左到右
• row-reverse    主轴方向从右到左排列
• column    垂直方向从上而下
• column-reverse   垂直方向从下往上

2）flex-wrap  规定是否允许项目换行以及多行排列时换行方向

• nowrap  默认值，表示不换行
• wrap   单行排不下的时候允许换行排列
• wrap-reverse  在上一个基础上，换行方向为wrap反方向

3）justify-content  设置项目在主轴方向上的对齐方式以及分配项目之间及其周围多余的空间

• flex-start  默认值，项目对齐主轴起点，不留空隙
• center 项目在主轴上居中排列，不留空隙，第一个项目和最后一个项目分别与起点和终点距离相等
• flex-end  项目对其主轴终点，不留空隙
• space-between   项目间距相等，第一个和最后一个分别与起点和终点距离为0
• space-around     第一个和最后一个项目分别与起点和终点距离是中间项目间距的一半
• space-evenly    项目间距、第一个和最后一个项目分别与起点和终点距离均相等

4）align-items   设置项目在行中的对齐方式

• strench  默认值，未设置项目尺寸时项目拉伸到填满交叉轴
• flex-start   项目顶部与交叉轴起点对齐
• center   在交叉轴居中对齐
• flex-end   项目底部与交叉轴终点对齐
• baseline   项目与行的基线对齐，未单独设置基线时等同flex-start

5）align-content   用于多行排列时设置项目在交叉轴方向上的对齐方式，以及分配项目之间及其周围多余的空间

• strench   默认值
• flex-start
• center
• flex-end
• space-between
• space-around
• space-evenly

3.项目属性

1）order    设置项目沿主轴方向上的排列顺序，数值越小，排列越靠前。属性值为整数

2）flex-shrink  设置项目收缩因子。项目溢出时，通过规定比例压缩项目适应容器。是非负数。

flex-shrink属性总和小于1时溢出长度：

3）flex-grow  设置项目扩张因子。非负数。

当flex-grow属性值总和小于1时扩张单位就是全部剩余空间

4）flex-basis  根据主轴方向代替项目宽/高，优先级高于width/height

ps：数值比auto优先级更高

5）flex   是flex-grow、flex-shrink、flex-basis的简写方式

• none  等价于 0 0 auto
• auto   等价于1 1 auto

6）align-self   设置项目在行中交叉轴上对齐方式，覆盖容器的align-items，可对项目的对齐方式做特殊处理