基础容器，用作页面结构的根节点或将内容进行分组。

权限列表

无

子组件

支持。

属性

支持[通用属性]

样式

除支持组件[通用样式]外，还支持如下样式：

名称	类型	默认值	必填	描述
flex-direction	string	row	否	flex容器主轴方向。可选项有：- column：垂直方向从上到下。- row：水平方向从左到右。
flex-wrap	string	nowrap	否	flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：- nowrap：不换行，单行显示。- wrap：换行，多行显示。
justify-content	string	flex-start	否	flex容器当前行的主轴对齐格式。可选项有：- flex-start：项目位于容器的开头。- flex-end：项目位于容器的结尾。- center：项目位于容器的中心。- space-between：项目位于各行之间留有空白的容器内。- space-around：项目位于各行之前、之间、之后都留有空白的容器内。- space-evenly5+: 均匀排列每个元素，每个元素之间的间隔相等。
align-items	string	stretch	否	flex容器当前行的交叉轴对齐格式，可选值为：- stretch：弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。- flex-start：元素向交叉轴起点对齐。- flex-end：元素向交叉轴终点对齐。- center：元素在交叉轴居中。- baseline：如Flex布局纵向排列，则该值与’flex-start‘等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。
align-content	string	flex-start	否	交叉轴中有额外的空间时，多行内容对齐格式，可选值为：- flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。- flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。- center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。- space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。- space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
grid-template-[columns	rows]	string	1行1列	否
grid-[columns	rows]-gap		0	否
grid-row-[start	end]	number	-	否
grid-column-[start	end]	number	-	否
grid-auto-flow5+	string	-	否	使用框架自动布局算法进行网格的布局，可选值为：- row：逐行填充元素，如果行空间不够，则新增行；- column：逐列填充元素，如果列空间不够，则新增列。
overflow6+	string	visible	否	设置元素内容区超过元素本身大小时的表现形式。- visible：多个子元素内容超过元素大小时，显示在元素外面；- hidden：元素内容超过元素大小时，进行裁切显示；- scroll：元素内容超过元素大小时，进行滚动显示并展示滚动条（当前只支持纵向）。overflow: scroll样式需要元素设置固定的大小，默认滚动方向与容器方向一致。
align-items6+	string	-	否	设置容器中元素交叉轴上的对齐方式：- stretch：Flex容器内容在交叉轴方向被拉伸到与容器相同的高度或宽度；- flex-start：Flex布局容器内元素向交叉轴起点对齐；- flex-end：Flex布局容器内元素向交叉轴终点对齐；- center：Flex布局容器内元素在交叉轴居中对齐；- baseline：如Flex布局纵向排列，则该值与’flex-start’等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。
scrollbar-color6+		-	否	设置滚动条的颜色。
scrollbar-width6+		-	否	设置滚动条的宽度。
overscroll-effect6+	string	-	否	设置滚动边缘效果，可选值为：- spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹；- fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化；- none：滑动到边缘后无效果

事件

除支持[通用事件]外，还支持如下事件：

名称	参数	描述
reachstart6+	-	当页面滑动到最开始的点时触发的事件回调，当flex-direction: row时才会触发。
reachend6+	-	当页面滑动到最末尾的点时触发的事件回调，当flex-direction: row时才会触发。
reachtop6+	-	当页面滑动到最上部的点时触发的事件回调，当flex-direction: column时才会触发。
reachbottom6+	-	当页面滑动到最下部的点时触发的事件回调，当flex-direction: column时才会触发。

方法

除支持[通用方法]外，还支持如下方法：

名称	参数	返回值	描述
getScrollOffset6+	-	ScrollOffset	获取元素内容的滚动偏移。需要设置overflow样式为scroll。
scrollBy6+	ScrollParam	-	指定元素内容的滚动偏移。需要设置overflow样式为scroll。

表1 ScrollOffset6+

名称	类型	描述
x	number	在x轴方向的偏移，单位为px。
y	number	在y轴方向的偏移，单位为px。

表2 ScrollParam6+

名称	类型	描述
dx	number	水平方向滑动的偏移量，单位px。
dy	number	垂直方向滑动的偏移量，单位px。
smooth	boolean	是否平滑处理。

示例

1. Flex样式

<!-- xxx.hml -->
<div class="container">
  <div class="flex-box">
    <div class="flex-item color-primary"></div>
    <div class="flex-item color-warning"></div>
    <div class="flex-item color-success"></div>
  </div>
</div>

/* xxx.css */
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 454px;
  height: 454px;
}
.flex-box {
  justify-content: space-around;
  align-items: center;
  width: 400px;
  height: 140px;
  background-color: #ffffff;
}
.flex-item {
  width: 120px;
  height: 120px;
  border-radius: 16px;
}
.color-primary {
  background-color: #007dff;
}
.color-warning {
  background-color: #ff7500;
}
.color-success {
  background-color: #41ba41;
}

1. Flex Wrap样式

<!-- xxx.hml -->
<div class="container">
  <div class="flex-box">
    <div class="flex-item color-primary"></div>
    <div class="flex-item color-warning"></div>
    <div class="flex-item color-success"></div>
  </div>
</div>

/* xxx.css */
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 454px;
  height: 454px;
}
.flex-box {
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  width: 300px;
  height: 250px;
  background-color: #ffffff;
}
.flex-item {
  width: 120px;
  height: 120px;
  border-radius: 16px;
}
.color-primary {
  background-color: #007dff;
}
.color-warning {
  background-color: #ff7500;
}
.color-success {
  background-color: #41ba41;
}

1. Grid样式

<!-- xxx.hml -->
<div class="common grid-parent">
  <div class="grid-child grid-left-top"></div>
  <div class="grid-child grid-left-bottom"></div>
  <div class="grid-child grid-right-top"></div>
  <div class="grid-child grid-right-bottom"></div>
</div>

/* xxx.css */
.common {
  width: 400px;
  height: 400px;
  background-color: #ffffff;
  align-items: center;
  justify-content: center;
  margin: 24px;
}
.grid-parent {
  display: grid;
  grid-template-columns: 35% 35%;
  grid-columns-gap: 24px;
  grid-rows-gap: 24px;
  grid-template-rows: 35% 35%;
}
.grid-child {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.grid-left-top {
  grid-row-start: 0;
  grid-column-start: 0;
  grid-row-end: 0;
  grid-column-end: 0;
  background-color: #3f56ea;
}
.grid-left-bottom {
  grid-row-start: 1;
  grid-column-start: 0;
  grid-row-end: 1;
  grid-column-end: 0;
  background-color: #00aaee;
}
.grid-right-top {
  grid-row-start: 0;
  grid-column-start: 1;
  grid-row-end: 0;
  grid-column-end: 1;
  background-color: #00bfc9;
}
.grid-right-bottom {
  grid-row-start: 1;
  grid-column-start: 1;
  grid-row-end: 1;
  grid-column-end: 1;
  background-color: #47cc47;
}

1. 拖拽7+

<!-- xxx.hml -->
<div class="container">
  <div class="content" ondragstart="dragstart" ondrag="drag" ondragend="dragend" style="position: absolute;left: {{left}};top: {{top}};">
  </div>
</div>

 /* xxx.css */
 .container {
 flex-direction: column;
 width: 100%;
 height: 100%;
 }
 .content {
 width: 200px;
 height: 200px;
 background-color: red;
 } 

// xxx.js
import promptAction from '@ohos.promptAction';
export default {
  data:{
    left:0,
    top:0,
  },
  dragstart(e){
    prompt.showToast({
      message: 'Start to be dragged'
    })
  },
  drag(e){
    this.left = e.globalX;
    this.top = e.globalY;
  },
  dragend(e){
    promptAction.showToast({
      message: 'End Drag'
    })
  }
}

<!-- xxx.hml -->
<div class="container">
  <div class="content" ondrag="drag" style="position: absolute;left: {{left}};top: {{top}};"></div>
  <div style="width: 500px; height: 500px; background-color: yellow; position: fixed; left: 15%; top: 30%; opacity:0.3"
    ondragenter="dragenter" ondragover="dragover" ondragleave="dragleave" ondrop="drop">
  </div>
</div>

/* xxx.css */
.container {
  flex-direction: column;
  width: 100%;
  position: relative;
  max-width: 100%;
}
.content{
  width: 200px;
  height: 200px;
  background-color: red;
  position: absolute;
}

// xxx.js
import promptAction from '@ohos.promptAction';
export default {
  data:{
    left:0,
    top:0,
  },
  drag(e){
    this.left = e.globalX;
    this.top = e.globalY;
  },
  dragenter(e){
    promptAction.showToast({
      message: 'enter'
    })
  },
  dragover(e){
    promptAction.showToast({
      message: 'over'
    })
  },
  dragleave(e){
    promptAction.showToast({
      message: 'leave'
    })
  },
  drop(e){
    promptAction.showToast({
      message: 'drop'
    })
  }
}

1. 手指捏合7+

<!-- xxx.hml -->
<div class="container">
  <div class="content" onpinchstart="pinchstart" onpinchend="pinchend" onpinchupdate="pinchupdate"
    onpinchcancel="pinchcancel"> 
  </div>
</div>

/* xxx.css */
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 454px;
  height: 454px;
}
.content {
  width: 400px;
  height: 400px;
  background-color: aqua;
  margin: 30px;
}

// xxx.js
import promptAction from '@ohos.promptAction';
export default {
  pinchstart(e){
    promptAction.showToast({
      message: 'pinchstart!!!'
    })
  },
  pinchupdate(e){
    promptAction.showToast({
      message: 'Two-finger pinch update'
    })
  },
  pinchend(e){
    promptAction.showToast({
      message: 'Finished with two fingers pinching'
    })
  },
  pinchcancel(e){
    promptAction.showToast({
      message: 'Finger pinching is interrupted'
    })
  }
}

最后呢

很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。

针对鸿蒙成长路线打造的鸿蒙学习文档。话不多说，我们直接看详细鸿蒙（OpenHarmony ）手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门视频，帮助大家在技术的道路上更进一步。

• 《鸿蒙 (OpenHarmony)开发学习视频》
• 《鸿蒙生态应用开发V2.0白皮书》
• 《鸿蒙 (OpenHarmony)开发基础到实战手册》
• OpenHarmony北向、南向开发环境搭建
• 《鸿蒙开发基础》
• 《鸿蒙开发进阶》
• 《鸿蒙开发实战》

总结

鸿蒙—作为国家主力推送的国产操作系统。部分的高校已经取消了安卓课程，从而开设鸿蒙课程；企业纷纷跟进启动了鸿蒙研发。

并且鸿蒙是完全具备无与伦比的机遇和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，未来将会支持 50 万款的应用。那么这么多的应用需要开发，也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长，学习鸿蒙势在必行！ 自↓↓↓拿