＜datart二开＞翻牌器侧（纵）轴对齐方式

config.ts 配置信息

{
          label: '主对齐方式',
          key: 'xAlignment',
          default: 'start',
          comType: 'select',
          options: {
            translateItemLabel: true,
            items: [
              {
                label: '@global@.common.alignmentType.start',
                value: 'start',
              },
              {
                label: '@global@.common.alignmentType.center',
                value: 'center',
              },
              {
                label: '@global@.common.alignmentType.end',
                value: 'end',
              },
            ],
          },
        },

Scorecard.tsx 获取配置项的值 

  const [show, font, position, alignment,xAlignment] = getStyles(
      style,
      ['label'],
      ['show', 'font', 'position', 'alignment','xAlignment'],
    );

ScorecardAdapter.tsx扩充flex布局样式 align-items: ${p => p.xAlignment};

扩展知识：

align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

提示：使用每个弹性对象元素的 align-self 属性可重写 align-items 属性。

stretch	默认。项目被拉伸以适合容器。
center	项目位于容器的中央。
flex-start	项目位于容器的开头。
flex-end	项目位于容器的末端。
baseline	项目被定位到容器的基线。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

提示：使用 align-content 属性对齐交叉轴上的各项（垂直）。

flex-start	默认值。项目位于容器的开头。
flex-end	项目位于容器的结尾。
center	项目位于容器中央。
space-between	项目在行与行之间留有间隔。
space-around	项目在行之前、行之间和行之后留有空间。
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

    <ScorecardBox padding={padding} xAlignment = {nameConfig?.xAlignment || 'center'} onClick={ssp} style={{ background }}>
        <AggregateBox
          alignment={nameConfig?.alignment || 'center'}
          position={nameConfig?.position || 'column'}
        >
          <ValueBox style={dataConfig?.[0].font} {...event?.[0]}>
            {data?.[0]?.value}
          </ValueBox>
          {nameConfig?.show && (
            <NameBox style={nameConfig?.font} {...event?.[0]}>
              {data?.[0]?.name}
            </NameBox>
          )}
        </AggregateBox>
      </ScorecardBox>
    );
  },
);
export default ScorecardAdapter;

const ScorecardBox = styled.div<ScorecardBoxProp>`
  display: flex;
  flex-direction: column;
  align-items: ${p => p.xAlignment};
  justify-content:  center;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: ${p => p.padding};
`;