div

基本容器，支持子组件，支持通用属性，支持通用样式，支持通用事件

基础示例

完整单页示例，可直接替换 BlueOS Studio 模板工程的首页 index.ux 运行。示例用 <div> 嵌套构建纵向与横向两层 flex 布局，可见文字全部放在 <text> 子元素中，点击按钮可切换内层容器的主轴方向。

<script>
  const ROW_CLASS = 'flex flex-row items-center justify-between w-full px-40 mt-20'
  const COLUMN_CLASS = 'flex flex-col items-center justify-between w-full px-40 mt-20'

  export default {
    data: {
      vertical: false,
      boxClass: ROW_CLASS,
    },
    toggleDirection() {
      this.vertical = !this.vertical
      // 复杂表达式在脚本中预先计算，模板只做简单绑定
      this.boxClass = this.vertical ? COLUMN_CLASS : ROW_CLASS
    },
  }
</script>

<template>
  <div class="flex flex-col items-center justify-center w-full h-full">
    <text class="text-white text-3xl">div 布局示例</text>
    <div class="{{boxClass}}">
      <text class="text-white text-2xl">一</text>
      <text class="text-white text-2xl">二</text>
      <text class="text-white text-2xl">三</text>
    </div>
    <input class="text-white mt-20" type="button" value="切换主轴方向" onclick="toggleDirection" />
  </div>
</template>

<style>
@tailwind utilities;
</style>

display 仅支持 flex 与 none，因此 <div> 始终是 flex 容器，不需要额外声明 display: flex。蓝河不支持 gap，子元素间距请通过 justify-content 或子元素自身的 margin 实现。

样式

名称	类型	默认值	必填	描述
flex-direction	column | row | column-reverse | row-reverse	row	否	默认为横向 row，父容器为<div>、<list-item>时生效
flex-wrap	nowrap | wrap | wrap-reverse	nowrap	否	规定 flex 容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向
justify-content	flex-start | flex-end | center | space-between | space-around	flex-start	否	设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
align-items	stretch | flex-start | flex-end | center	stretch	否	定义 flex 子项在 flex 容器的当前行的侧轴（纵轴）方向上的对齐方式
align-content	stretch | flex-start | flex-end | center | space-between | space-around	stretch	否	属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直），容器内必须有多行的项目，该属性才能渲染出效果