`
flycomos.lee
  • 浏览: 280578 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Flex常见容器汇总

阅读更多
整理了一下Flex的一些常用的容器组件,参考于Adobe官方说明文当。

Canvas
Canvas容器绘置一个长方形的区域用来放置子组件(其他容器或者控件),与其他容器不同,Canvas子组件的位置必须指定绝对坐标或使用约束条件布局。

Box, HBox, and VBox
Box容器用来横向或者纵向的放置子组件,使用direction属性来决定是横向布局还是纵向布局。HBox,VBox就是指定了direction属性的Box。

ControlBar
ControlBar容器一般与Panel容器或者TitleWindow容器配合使用,比如在Panel容器的底部放置一个ControlBar作为Footer。

ApplicationControlBar
ApplicationControlBar容器一般起到导航的作用,作用于整个应用程序的运行期间,比如我们使用的Word,Excel顶部用来放置工具栏和菜单栏的区域。
ApplicationControlBar容器有2种模式,分别是Docked模式和Normal模式。Docked模式将 ApplicationControlBar容器一直显示的停靠在应用程序的顶部,并且自动将宽度调整为应用程序的宽度。Normal模式可以将 ApplicationControlBar容器以任意的大小放置在应用程序的任何位置。

DividedBox, HDividedBox, and VDividedBox
DividedBox容器类似与Box容器,用来横向或者纵向的放置子组件,不同的是DividedBox用显示的间隔物将自组件分割开,你可以拖动间隔物来扩大或缩小每个子组件所占的空间,HDividedBox和VDividedBox相与DivideBox的区别与HBox和VBox相对与Box的区别一样。

Form, FormHeading, and FormItem
Form是Web应用最为常见的容器了,常见的有用户注册,帐单信息等。FormHeading用来区分每一组Form信息,如用户注册的过程中,可以指定2个FormHeading分别是必添项目和选添项目。FormItem是Form中具体的某一个项目,包含一个Label和若干个控件。

Grid
Grid容器用来以表格的形式放置组件,好比Html中没有Border的Table。Grid容器的每一个单元格(cell)都可以放置0个或1个子组件,如果想要在一个单元格中放置多个控件,那么就在这个单元格中再多加一个容器。Grid中使用GridRow来创建行,用GridItem来创建单元格。类似与Html的table,你也可以使用rowSpan,colSpan来合并单元格。

Panel
Panel容器是一个比较常用的容器,包含标题(title)区域,放置子组件的容器(content)区域,以及边框(border)。content 区域有3种形式,分别是横向布局(horizontal),纵向布局(vertical),绝对坐标布局(absolute)。Panel会很普遍的与 Form结合起来使用,当然还有前面提到的ControlBar组件也是Panel容器中很常用的一个子容器。

Tile
Tile容器将子组件按照表格的形式放置,与Grid容器的区别是,Tile容器每个单元格的大小都是一样的。Tile容器子组件具体的放置位置由 Flex来安排,而Tile容器的宗旨是将所有的子组件都能以横竖排列最佳的位置摆放。比如Tile容器有16个子组件,就将16个子组件以4行4列的位置摆放,如果是15个子组件,也是4行4列摆放,只不过最后一行的最后一列是空着的。

TitleWindow
TitleWindow容器继承与Panel容器,所以TitleWindow拥有Panel的所有特性,而不同的是TitleWindow容器是用来做弹出(popup)面板的。
分享到:
评论

相关推荐

    flex布局Flex实现常见布局的汇总

    先简单介绍一下,要使用flex布局,需要先给一个容器元素设置display:flex让它变成flex容器。 然后其所有的直接子元素就变成flex子元素了,在flex里存在两根轴,叫主轴和交叉轴,互相垂直,主轴默认水平,flex子元素...

    前端面试常见问题规整.pdf

    ### 前端面试常见问题知识点汇总 #### 一、基础知识篇 **1. 实现水平垂直居中方式** 在前端开发中,实现元素的水平垂直居中是常见的需求之一。常用的实现方法包括: - **Flex 布局**:通过设置容器的 `display: ...

    浏览器兼容性汇总

    ### 浏览器兼容性汇总知识点 #### 一、JavaScript兼容性问题 ##### 1. HTML对象获取问题 - **火狐(Firefox)**: 使用 `document.getElementById("idName")` 获取DOM元素。 - **IE**: 支持 `document.idname` 和 ...

    2021年前端面试题汇总.docx

    本资源汇总了前端开发中常见的面试题,涵盖了HTML、CSS、JavaScript、Vue等领域,旨在帮助开发者更好地准备面试。下面是本资源中的一些重要知识点: 一、HTML与CSS基础知识 1. 页面导入样式时,link和@import的...

    前端CSS及其他知识点错题汇总_前端、面试_

    12. **Flexbox布局**:掌握flex容器和flex项目的属性,如flex-direction、justify-content、align-items等,能解决复杂的单行或单列布局问题。 13. **CSS Grid布局**:理解grid-template-columns/rows、grid-gap、...

    经典可重用滑块代码,支持横向和纵向

    在CSS中,可以使用`display: flex`属性创建一个弹性容器,然后通过调整`flex-wrap`和`justify-content`属性来控制内容的排列和对齐。JavaScript部分则需要监听滑动事件,根据用户的滚动或拖拽行为更新滑块的位置。 ...

    静动态网页布局技术汇总

    常见的属性有: 1. **颜色属性**:如`color`用于设置文本颜色,`background-color`用于设置背景颜色。 2. **尺寸属性**:如`width`和`height`定义元素尺寸,`padding`和`margin`设置内边距和外边距。 3. **位置属性*...

    前端面试题汇总

    - **position** 会影响元素的位置、堆叠顺序和容器边界。 - **display** 影响元素的显示类型和布局。 - **margin collapse** 会导致相邻的块元素外边距重叠。 - **overflow** 控制溢出内容的行为。 - **float** 影响...

    java知识点汇总学习路线与笔记

    ### Java知识点汇总学习路线与笔记 #### 一、J2SE **面向对象**是Java的核心,主要包括**封装**、**继承**、**多态**三个特性。通过封装,可以隐藏对象的内部实现细节;继承使得类之间的代码复用成为可能;而多态则...

    利用css设置元素垂直居中的解决方法汇总

    在Web页面设计中,元素的水平垂直居中布局是一项常见的挑战,尤其是垂直居中,往往需要灵活运用各种CSS技巧。以下是一些实用的CSS方法,帮助你解决元素垂直居中的问题。 1. **行内文本垂直居中** 对于行内文本,如...

    CSS清除浮动方法汇总

    本文将汇总一些常见的CSS清除浮动的方法。 1. **传统clear属性** CSS的`clear`属性用于指定元素是否可以放在浮动元素的旁边。如果设置为`clear:left`,则元素不会出现在左侧有浮动元素的地方;`clear:right`不让...

    经典的H5面试题

    本文档是一份关于经典H5前端面试题的汇总资料,旨在帮助求职者全方位地提升自己的技能水平。题目覆盖了前端开发中的多个关键技术和概念,对于希望深入了解前端领域的开发者来说非常有价值。 #### 关键词解析 1. **...

    ExtJs中文教程

    - 展示如何使用Flex布局和其他布局策略来组织FormPanel内部元素。 3. **表单初始化** - 讲解如何预填充表单数据以及如何根据服务器响应动态更新表单状态。 #### 十九、表格组件——GridPanel 1. **表格与...

    div+css布局大全

    - **CSS技巧汇总**:介绍了一些实用的CSS技巧,如文本阴影、圆角边框等,帮助提高页面的设计感和用户体验。 以上是对《Div+CSS布局大全》内容的详细知识点梳理。通过这些内容的学习,可以系统地掌握CSS布局的相关...

    Flutter实战1

    - 布局类Widgets:如`Row`, `Column`, `Flex`等。 - 容器类Widgets:如`Padding`, `ConstrainedBox`等。 2. **常用Widgets示例**: - 文本和字体样式:`Text`, `TextStyle` - 按钮:`RaisedButton`, `...

Global site tag (gtag.js) - Google Analytics