# (Vue)JsvFlexDiv
# 组件基本说明
对应代码位置:
node_modules/@shijiu/jsview-vue/utils/JsViewVueWidget/JsvFlexCell/JsvFlexDiv.vue
<!--
* 【模块 export 内容】
* JsvFlexDiv: 包装成一个支持flex属性的div
* props说明:
* class: 等同于div的class设置(目前未实装，后续支持...)
* style: 等同于div的style，关于flex的属性支持如下：
* 作为container:
* flexDirection: row|row-reverse|column|column-reverse 默认row, 决定主轴为行还是列，正向还是反向
* flexWrap: nowrap|wrap 默认nowrap, 主轴方向是否换行
* justifyContent: flex-start|flex-end|center 默认flex-start
* 主轴对齐方式(与direction相关决定start为左还是右)
* alignItems: flex-start|flex-end|center|stretch 默认center
* 副轴方向单行内的对齐方式，例如主轴为行时，项目在每行中竖直方向的对齐
* alignContent: flex-start|flex-end|center 默认flex-start
* 副轴方向多行内容总体的对齐方式，例如主轴为行时，项目在每行中竖直方向的对齐
* 作为item(二级container):
* alignSelf: auto|flex-start|flex-end|center|stretch 默认auto, 覆盖container的alignItems设置
* 特别注意: 这些属性会引起位置对齐问题, 所以会自动去掉: "overflow:hidden"
* askSize: boolean 设置会跟进flex的尺寸变化，设置后可通过getWidth/getHeight拿到尺寸，但会降低性能
* onSized: Function 比askSize更进一步，可以通过回调知道尺寸变化后的时机，回调参数(width, height)为flex后的尺寸
*
* expose说明:
* getWidth(): 当askSize或者onSize生效时，获取元素的宽度
* getHeight(): 当askSize或者onSize生效时，获取元素的高度
*
-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
下面将详细图示讲解各定位属性。
# flexDirection
排版方向
1
2
3
row
1
2
3
row-reverse
1
2
3
column
1
2
3
column-reverse
# flexWrap
超范围是否自动折行
1
2
3
wrap
1
2
3
nowrap
# justifyContent
主排版轴上的对齐方式
1
2
3
flex-start
1
2
3
flex-end
1
2
3
center
# alignItems
次轴方向的对齐方式
1
2
3
flex-start
1
2
3
flex-end
1
2
3
center
1
2
3
strech
(item不设高度)
# alignContent
排版有wrap时, 整体次轴方向的排列
1
2
3
flex-start
1
2
3
flex-end
1
2
3
center
# 常用场景提示
- 详情页tag横向平铺展示: 每个tag的图标设置高度不设置宽度进行自适应，然后不设置left横向自动排开，可以中插空白div来替代间距设置。
- 内容进行右下角对齐: flexDirection:row; alignItem:flex-end; justifyContent:flex-end
- 多行文字居中显示场景: justifyContent:center; alignContent:center