`
xvridan
  • 浏览: 37330 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

Flex 容器

FlexIDEA 
阅读更多
在Flex里使用容器进行布局的。每个容器详细的规定了子标签布置规则。

VBox

子级垂直排列，每一个子级在前一个子级的下面

HBox

子级水平排列，每一个子级在前一个子级的右面

Canvas

开发者可以通过x,y指定子级位置。如果没有指定，所有的子级都被放置于容器的左上角。

Application

能设置其属性像VBox、HBox、Canvas的容器。

Tile

以多行或多列布置子级。所有Tile的格大小相同。Flex安排Tile容器在一个正方形的表格里，每个格放置一个子级。

Panel

Box容器的子类，Panel容器可以通过设置layout属性做为HBox、VBox或Canvas容器（默认设置layout＝"absolute"，Panel容器的行为就像Canvas容器一样)。除此之外，该容器包含一个标题栏、一个标题、一个边框及其子级。

ControlBar

ControlBar容器将控件置于Panel或TitleWindow容听下边缘。通过指定属性，ControlBar容器可以像HBox或VBox一样进行布局（默认为Horizontal）。

ApplicationControlBar

设置属性可以使其像HBox或VBox进行布局（默认为Horizontal）。ApplicationControlBar 容器容纳提供全局导航和应用程序命令的组件, 并可以停靠在 Application 容器的上边缘。




无衣 2007-04-14 14:58 发表评论
分享到：
| Flex入门教程
评论
3 楼 dongya1987 2010-05-06  
Panel是Box的子类？？？

你用的flex那个版本？ 我在flex3看到的是
Panel extends Container
Box extends Container
2 楼 doyowei 2008-02-28  
1 楼 doyowei 2008-02-28  
          
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    flex容器的布局，图片样式效果设计

    在Web开发领域，Flex容器的布局是构建动态和响应式用户界面的重要技术。Flex布局，全称为Flexible Box布局，是CSS3的一种布局模式，旨在解决传统盒模型在处理复杂、多列或响应式布局时的局限性。它允许开发者轻松...

    flex实现的删除子容器

    - **容器（Flex Container）**：设置`display: flex`或`display: inline-flex`的元素成为Flex容器，它的所有直接子元素自动成为Flex项目（Flex Items）。 - **主轴（Main Axis）与侧轴（Cross Axis）**：主轴是...

    FLEX 容器内多个图片分别拖动

    ### FLEX 容器内多个图片分别拖动 ...通过以上步骤，我们能够实现在Flex容器中对多个图片的独立拖动功能。这种方法不仅增强了用户界面的交互性，也使得开发者能够更灵活地控制应用程序的视觉效果。

    转载类似iphono的加速度滑动效果的Flex容器

    标题提到的“转载类似iPhone的加速度滑动效果的Flex容器”是一个关于如何利用Flex布局实现类似iPhone滚动时的加速度效果的技术分享。这种效果使得滚动更加流畅，增强用户的操作体验。下面将详细介绍这个知识点及其...

    微信小程序开发中flex布局容器及元素之属性技术释疑.pdf

    justify-content属性用于定义Flex容器内的元素在主轴上的对齐方式，常见的值包括flex-start（起始位置对齐）、flex-end（结束位置对齐）、center（居中对齐）、space-between（两端对齐，元素之间间隔相等）、space-...

    详解CSS中的flex容器与flex属性

    flex container（flex容器 或 弹性容器） flex容器是flex元素的的父元素。 通过设置display 属性的值为flex 或 inline-flex定义。 注旧版本的属性值： box：将对象作为弹性容器显示。（最老版本）inline-box：将对象...

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

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

    flex嵌入html的容器

    本文将详细介绍如何在HTML中嵌入Flex容器，并以IFrameDemo为例进行说明。 首先，我们需要理解Flex和HTML的集成方式。通常，我们可以使用`<object>`或`<embed>`标签将Flex应用嵌入到HTML中。这两种方法都可以实现...

    flex组件的所有源文件

    1. **CSS Flex容器（Flex Container）**：在CSS中，一个拥有`display: flex`或者`display: inline-flex`样式的元素成为Flex容器。这将使得该元素的所有直接子元素成为Flex项目（Flex Items）。源文件中可能包含设置...

    Flex弹性布局详解

    - **Flex容器（Flex Container）**: 通过设置`display: flex`或`display: inline-flex`来定义一个Flex容器。 - **Flex项目（Flex Item）**: Flex容器的所有直接子元素即为Flex项目。 #### 三、容器的属性 ##### 1....

    flex组件详细介绍

    在Flex布局中，父元素被称为Flex容器，通过设置`display`属性为`flex`或`inline-flex`，可以将其转换为Flex容器。例如： ```css .container { display: flex; } ``` 二、Flex方向 Flex容器有两个主要的流向：主轴...

    flex css 模版经典

    - **Flex容器**：任何具有`display: flex`或`display: inline-flex`样式的父元素都被视为Flex容器。容器内的所有直接子元素称为**Flex项目**。 - **主轴与交叉轴**：Flex容器有一个主轴（main axis），其方向由`...

    Flex布局笔记.docx

    1. Flex容器（flex-container） Flex容器是通过设置`display`属性来定义的，有两种类型： - `display: inline-flex`：创建一个行内Flex容器，元素与其他行内元素在同一行。 - `display: flex`：创建一个块级Flex...

    flex事件flex事件flex事件flex事件

    "flex事件"这个概念可能指的是与Flex布局相关的JavaScript事件或者是在Flex容器中发生的交互事件。然而，由于提供的信息较少，无法明确具体是指哪些特定的事件。下面，我将详细介绍Flex布局的基础知识以及可能与之...

    flex_style.rar_flex_flex style_style flex

    - Flex容器：任何具有`display: flex`或`display: inline-flex`样式的元素都成为Flex容器，其内部的子元素称为Flex项目。 - Flex布局允许容器在主轴（默认为水平方向）和交叉轴（垂直方向）上对项目进行布局。 2....

    flex css动态加载

    - **Flex容器**：设置`display: flex`或`display: inline-flex`的元素成为Flex容器，它的所有直接子元素自动变为Flex项目。 - **Flex项目**：Flex容器中的子元素，可以通过Flexbox属性来控制它们的布局、顺序和...

    flex特效组件用法效果

    首先，让我们理解Flex容器（ContainerCtrl）的概念。在Flex布局中，容器是包含一个或多个子元素的元素，这些子元素可以是其他Flex容器或普通的HTML元素。`ContainerCtrlDemo`可能是一个示例项目，演示了如何使用Flex...

    划分flex页面布局

    1. Flex容器：在Flex布局中，父元素被称为Flex容器，它决定了子元素如何布局。通过设置`display`属性为`flex`或`inline-flex`，可以将一个元素转变为Flex容器。 2. Flex项目：容器内的子元素称为Flex项目，它们是被...

Magicbox
Global site tag (gtag.js) - Google Analytics