FLEX中所有的布局都需要容器。<mx:Application>标签实际上就是一个容器。每个容器都有一定的规则来确定子元素的排列方式,也就是本文讨论的FLEX容器布局规则。
VBox
子元素沿垂直方向排列。每个子元素都会绘制在前一个子元素的下方。
HBox
子元素沿水平方向排列。每个子元素都会绘制在前一个子元素的右方。
Canvas
按开发者指定的x坐标与y坐标绘制子元素。如果没有指定坐标,则所有的子元素都绘制在容器的左上方。例如,如果在Canvas中添加一个Button控件而不为其指定坐标,那么Button就被呈现在Canvas的左上角,默认的(0,0)位置。
Application
通过使用layout属性,Application布局能设置成类似VBox、HBox或Canvas容器中的任何一种方式。
Tile
将其子元素排列成一个或者多个横行或者竖列,在需要时增加新行或者新列。所有的Tile容器单元格大小都相同。Flex将Tile容器的单元格排列在正方形网格中,每一个单元格内放入一个子元素。布局方式由direction属性决定。
Pnael
Box容器的子类。Panel容器可以像VBox、HBox或者Canvas容器之中的任何一种那样布局,这取决于指定的layout属性(默认为absolute,与Canvas一样)。除了可以包含子元素,Panel容器还提供了标题栏区域,可以包含它的标题和状态信息。
ControlBar
ControlBar容器可以用于将工具栏停靠在Panel容器或者TitleWindow容器的底部。ControlBar容器能以HBox或者VBox容器的方式布局,这取决于direction属性的设置情况(默认为horizontal,水平方式布局)。
ApplicationControlBar
能以HBox容器或者VBox容器的方式布局,这取决于direction的设置(默认horizontal)。ApplicationControlBar用于放在在整个应用中都能访问的组件。如果ApplicationControlBar容器是<mx:Application>的第一个子元素,而且dock属性为true,那么ApplicationControlBar容器会停靠在应用程序绘制区域的顶部,占满应用程序的最大宽度,而且不随应用程序的滚动而滚动。
分享到:
相关推荐
`属性,容器将变为一个Flex容器,其子元素将遵循Flex规则。通过`flex-direction: row;`属性,我们可以使子元素沿水平方向排列,实现横向布局。此外,`justify-content`属性可以控制子元素在主轴(在此为水平方向)上...
- 删除子容器后,剩余的Flex项目会根据Flex布局规则重新调整大小和位置。这包括`flex-grow`, `flex-shrink`, 和 `flex-basis`属性的影响。 - 当删除一个具有固定尺寸的Flex项目时,其他项目可能会占用其空间,除非...
3. **属性调整:** Flex容器可以通过以下属性控制子元素的布局: - `flex-direction`:定义主轴的方向(从左到右、从右到左、从上到下或从下到上)。 - `flex-wrap`:决定子元素是否换行以及换行方式。 - `...
当一个元素被设置为Flex容器时,它的所有直接子元素都会自动成为Flex项目,并按照特定规则进行布局。 - **Flex容器(Flex Container)**: 通过设置`display: flex`或`display: inline-flex`来定义一个Flex容器。 - ...
1. Flex容器:在Flex布局中,父元素被称为Flex容器,它决定了子元素如何布局。通过设置`display`属性为`flex`或`inline-flex`,可以将一个元素转变为Flex容器。 2. Flex项目:容器内的子元素称为Flex项目,它们是被...
首先,Flex布局涉及到两个基本概念:Flex容器和Flex项目。在Flex布局中,容器内的直接子元素自动成为Flex项目,并且可以应用Flex布局的属性。在给定的教程中,使用了div作为容器(代表骰子的面),span作为项目...
在Flex布局中,容器被设置为flex容器后,其内部的子元素就成为flex项目。通过调整各种flex属性,可以轻松控制这些项目的顺序、大小和位置,无论它们的原始尺寸如何。主要的flex属性包括: 1. `display: flex`:这是...
通过设置容器的display属性为flex或inline-flex,可以将其转换为Flex容器。一旦容器被定义,其内部的子元素就成为Flex项目,可以按照Flex布局规则进行排列。 1. 主轴与侧轴 Flex布局有两条主要的轴线:主轴(main ...
Flex布局在Web开发中是一种非常重要的布局模式,它允许元素在容器中灵活地调整大小和位置,以适应不同屏幕尺寸和设备。在Flex布局发生变化时,例如元素的增删、大小调整或排列顺序改变,我们可能希望添加动画效果来...
这是使用Flex布局的第一步,所有子元素将遵循这种布局规则。 2. `flex-direction` - 控制主轴的方向,可选值有`row`(默认,水平从左到右)、`row-reverse`(水平从右到左)、`column`(垂直从上到下)和`column-...
Flex容器拥有一系列关键属性,它们决定了容器内部元素的排列方式和对齐规则: 1. **flex-direction**:定义了项目的排列方向。 - `row`(默认值):项目从左至右水平排列。 - `row-reverse`:项目从右至左水平...
Flex布局的核心在于使用display属性将某个元素定义为flex容器。在这个容器中,它的直接子元素会成为flex项目。这种布局模型不需要指定元素的宽度或高度,因为容器会根据项目的内容自动调整大小。此外,flex项目可以...
`:使容器成为Flex容器,其内部的所有直接子元素称为Flex项目。 - `flex-direction`:控制主轴的方向,可设置为`row`(默认,水平从左到右)、`row-reverse`(水平从右到左)、`column`(垂直从上到下)或`column-...
这使得容器内的子元素可以按照Flex布局规则进行排列和对齐。 2. 主轴和侧轴:Flex布局有主轴(main axis)和侧轴(cross axis)。主轴是元素沿着哪条轴进行伸缩和排列,默认为水平方向,可以通过`flex-direction`...
这是一个显式宽度属性,意味着它是明确设置的宽度值,不受其他布局规则的影响。当*explicitWidth*被设置时,它将优先于其他可能影响宽度的属性,如*percentWidth*或*measuredWidth*。 #### 4. *measuredWidth *...
容器内的子元素会成为Flex项(Flex Items),并受到Flex布局规则的约束。 2. **主轴(Main Axis)与交叉轴(Cross Axis)**:Flex容器有一个主轴,从起点(main start)到终点(main end),还有一个与其垂直的交叉...
容器定义了整体布局规则,项目则是在容器内按照这些规则排列和填充空间。在实现携程APP首页布局时,我们需要关注以下几个关键属性: 1. `display: flex`:这是开启Flex布局的关键,将元素的display属性设置为flex,...
这将使容器成为Flex容器,并允许其子元素按照Flex规则排列。 1. `flex-direction`: 这个属性决定了子元素的主轴方向,即它们如何沿着这个轴线排列。可选值有`row`(默认,从左到右)、`row-reverse`(从右到左)、`...
`Canvas`提供了一个绝对定位的容器,子元素可以被放置在任意位置,不受任何布局规则的限制。这为创建自由形式的布局提供了可能,但同时也要求开发者手动管理子元素的位置和大小。 ### Accordion(手风琴) `...
通过设置`display: flex`或`display: inline-flex`,一个元素成为Flex容器。 - **子元素(Items)**:容器内的所有直接子元素称为Flex项目,它们会按照容器的规则进行排列和分配空间。 2. **主轴和侧轴** - **...