FlexBox 弹性布局组件

用于快速实现 flex 布局，支持自动填充剩余空间。

基础用法

Header (固定高度 60px)

Main Content (自动撑满剩余空间 Flex: 1)

Footer (固定高度 60px)

hide code

<template>
  <div style="height: 400px; border: 1px solid #ebeef5; border-radius: 4px; overflow: hidden;">
    <ctc-flex-box direction="column" height="100%">
      <div style="height: 60px; background: #e6f7ff; line-height: 60px; text-align: center; color: #409eff; font-weight: bold;">Header (固定高度 60px)</div>
      <ctc-flex-box fill style="background: #f0f9eb; padding: 20px;">
        <div style="width: 100%; height: 100%; border: 2px dashed #67c23a; display: flex; align-items: center; justify-content: center; color: #67c23a;">Main Content (自动撑满剩余空间 Flex: 1)</div>
      </ctc-flex-box>
      <div style="height: 60px; background: #e6f7ff; line-height: 60px; text-align: center; color: #409eff; font-weight: bold;">Footer (固定高度 60px)</div>
    </ctc-flex-box>
  </div>
</template>

<script>
export default {
}
</script>

属性 (Props)

参数	说明	类型	默认值
direction	排列方向 ('row' / 'column')	String	'column'
fill	是否填充剩余空间 (flex: 1)	Boolean	true
shrink	是否允许收缩 (min-height/min-width: 0)	Boolean	true
grow	flex-grow 值	Number / String	1
justify	主轴对齐 (justify-content)	String	'flex-start'
align	交叉轴对齐 (align-items)	String	'stretch'
gap	间距 (px)	Number / String	0
scroll	是否开启滚动 (Boolean / 'x' / 'y')	Boolean / String	false
width	自定义宽度	String	null
height	自定义高度	String	null