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

flex day 7 容器与布局

阅读更多

<s:Group> 是可视元素的基类。

<s:layout> 负责容器中可视元素的测量和布局

<s:VerticalLayout>按垂直顺序从上向下排列布局元素

<s:HorizontalLayout>按水平顺序从左到右排列布局元素

<s:TileLayout>在单元格大小相等的列和行中排列布局元素。TileLayout 类使用许多属性来控制列和行的方向、计数、大小、间隙和两端对齐以及单元格内的元素对齐。

 

<s:HGroup>是使用 HorizontalLayout 类的 Group 容器的一个实例

<s:VGroup>是使用 VerticalLayout 类的 Group 容器的一个实例

	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			import spark.layouts.BasicLayout;
			import spark.layouts.HorizontalLayout;
			import spark.layouts.TileLayout;
			import spark.layouts.VerticalLayout;
			private var _basicLayout:BasicLayout = new BasicLayout();
			private var _verticalLayout:VerticalLayout =
				new VerticalLayout();
			private var _horizontalLayout:HorizontalLayout = 
				new HorizontalLayout();
			private var _tileLayout:TileLayout = new TileLayout();
			[Bindable]
			private var _layouts:ArrayCollection = new ArrayCollection([
				_basicLayout,_verticalLayout,_horizontalLayout,_tileLayout]);
		]]>
	</fx:Script>
	<s:Panel x="15" y="15" width="240" height="140">
		<s:Scroller width="100%" height="100%">
			<s:VGroup>
				<s:DropDownList id="layoutDDL" dataProvider="{_layouts}"
							    width="200" selectedIndex="0"/>
				<s:Group layout="{layoutDDL.selectedItem}">
					<s:Button label="a"/>
					<s:Button label="b"/>
					<s:Button label="c"/>
					<s:Button label="d"/>
				</s:Group>
			</s:VGroup>
		</s:Scroller>
	</s:Panel>

 

分享到:
评论

相关推荐

    flex in a week day2

    在“flex in a week day2”这个主题中,我们继续深入学习CSS布局中的Flexbox模型,这是现代网页设计中至关重要的一个部分。Flexbox允许我们更灵活地控制元素在容器内的排列方式,无论屏幕尺寸如何变化,都能实现响应...

    前端移动Web第二天知识点:Flex伸缩布局.zip

    在`day02-Flex伸缩布局`这个压缩包中,包含的就是关于Flex布局的源代码示例。你可以通过查看这些代码,更直观地理解Flex布局的工作原理和使用方法。实践中,可以尝试修改不同属性,观察布局的变化,从而加深理解。 ...

    day3-flex-example

    【标题】"day3-flex-example"是一个与前端开发相关的项目示例,主要涉及JavaScript技术,尤其是Flex布局的应用。在这个项目中,我们将会深入探讨Flex布局的基本概念、使用方法以及在实际开发中的应用。 【描述】...

    day48-Random Image Feed(随机图片显示)

    在本项目"day48-Random Image Feed(随机图片显示)"中,我们将探讨如何使用HTML、CSS和JavaScript技术来创建一个动态展示随机图片的功能。这个功能常见于网站的背景或者轮播图组件中,可以增加用户体验的趣味性和...

    导航代码练习code

    4. **Flex布局**: `display: flex` 引入了弹性盒模型,允许在一个容器内进行灵活的、响应式的布局。在创建导航条时,我们可以用 `flex` 来使各个链接项水平居中、等间距排列,或者根据屏幕尺寸自适应调整。 5. **...

    day34-Animated Countdown(动画倒计时)

    我们可以设定字体、颜色、布局等样式,同时也可以通过CSS动画来实现动态效果。例如,可以为每个计时单位添加过渡效果,使其在数值改变时平滑过渡: ```css #countdown { display: flex; justify-content: center;...

    div css练习div css练习div css练习div css练习

    本练习旨在通过使用div元素结合CSS来提升对页面布局和样式的理解与应用能力。 首先,`div`元素在HTML中是一个通用的容器,它可以包含其他HTML元素,常用于组织和划分页面结构。通过设置div的样式,我们可以控制其在...

    Work-Day-Scheduler

    2. **布局与容器**:为了组织日程表的内容,开发者可能会使用`&lt;div&gt;`元素创建容器,并通过CSS(Cascading Style Sheets)来定义布局,比如使用`display: flex`或`grid`布局,使日程表呈现为一天中的小时段网格。...

    day108:第108天

    在Flexbox中,可以通过`flex-grow`, `flex-shrink`和`flex-basis`属性来控制元素的大小,而在Grid中,可以使用`fr`单位或百分比来分配网格轨道的大小。 总的来说,第108天的学习内容强调了动态计算和灵活定义宽度的...

    2015年WEB前端开发笔试题.pdf

    或者使用Flexbox模型,设置主容器为flex,右侧栏设定固定宽度,左侧自动填充剩余空间;还可以使用CSS Grid布局,定义列宽,使左侧自适应。 3. CSS选择符与优先级:选择符包括标签选择符、类选择符、ID选择符等,...

    day54_navbar

    - `&lt;nav&gt;`标签:这是一个语义化的标签,用于定义导航链接的容器。 - `&lt;ul&gt;`标签:无序列表,常用来组织导航链接,避免直接使用`&lt;div&gt;`来布局,以保持语义清晰。 - `&lt;li&gt;`标签:列表项,包裹每个导航链接。 - `...

    Day-1-Challenge-Countdown-Timer-:这是一个倒数计时器,显示挑战的剩余天数,小时数,分钟数和秒数!

    7. **优化与性能**:为确保良好的用户体验,应关注代码的优化和性能。比如,避免过于频繁的DOM操作,可以使用`requestAnimationFrame`来更高效地更新计时器,或者使用`textContent`而非`innerHTML`来减少潜在的安全...

    Day06-07:“我的第一个周末项目”

    `&lt;div&gt;`元素常作为布局容器,CSS的`display`属性(如`flex`和`grid`)可实现灵活布局。响应式设计则利用媒体查询(@media)确保页面在不同设备上都能良好显示。 八、JavaScript集成 虽然HTML本身不支持交互性,但...

    HTML网页数字时钟代码.rar

    最后,`setInterval`函数用于每秒调用`updateClock`函数一次,确保时间始终与实际时间同步。 为了增强用户体验,我们还可以考虑添加一些其他功能,如调整字体大小和颜色、添加动画效果,或者使时钟在用户滚动页面时...

    简单清新带日期的圆形数字电子时钟js特效代码.zip

    为了实现这个时钟,我们需要一个容器元素来放置时钟,可能是一个`div`标签,通过设置相应的ID以便于JavaScript操作。例如,我们可以创建如下的HTML结构: ```html &lt;div id="clock"&gt;&lt;/div&gt; ``` 接下来是CSS样式设计...

Global site tag (gtag.js) - Google Analytics