布局和容器

Spark和Halo(MX)

  • Halo(MX)是Flex3独有的组件；
  • Spark是Flex4引入的新一代组件；
  • Flex4同时支持 Spark和Halo(MX);
  • Spark容器允许改变布局算法；
  • Halo(MX)组件则内置了不去算法，所以如果在Halo(MX)中，如果想使用另外一种布局方法，就必需修改所有容器的类型；

布局管理器

布局管理器通过3个阶段处理每个可视组件的位置和大小：

  1. 提交 - 查看每个组件的所有属性设置，此阶段将执行每个组件的commitProperties()方法，为布局管理器提供与组件位置和大小相关的属性。
  2. 测量 - 从内到外计算所有组件的默认大小，此过程涉及对所有内部子对象的宽度、边框厚度、内边距和子对象间的间距进行求和。布局管理器运行了每个对象的mesureSizes()方法。
  3. 布局 - 从外到内调用每个组件的updateDisplayList()方法，通过设置每个组件的位置和大小来对组件进行布局，使组件刷新显示的内容。

Spark容器支持使用的容器：

  • BasicLayout - 绝对布局
  • HorizontalLayout - 横向排列
  • VerticalLayout - 纵向排列
  • TileLayout - 网格排列

绝对布局

  • Application容器默认使用绝对布局；
  • 使用绝对布局需要指定或者默认指定BasicLayout类；
  • 绝对布局使用x和y属性；
  • 可以使用绝对布局的重叠制造一些特效；
  • 可以使用绝对布局来隐藏一些组件，在某些条件下再显示出来。

基于约束的布局

  • 此布局不使用相对于容器左上角的x和y属性来定位组件，而是相对于容器的四个边或者容器的中心点来定位组件；
  • 此布局的优点在于即使用户调整了窗口大小，组件同容器之间的相对位置关系仍然可以保持不变；
  • 如果使用绝对布局来实现同样的效果，就需要自己动手编写代码执行相应的计算，并在窗口发生变化后及时更新x和y属性；

基本约束：

  • top、bottom、left、right属性可用于控制组件与相关边的距离；
  • horizontalCenter和verticalCenter属性可用于控制组件在相应方向上与中心的距离；
  • baseline属性用于设置组件的上边与父容器的距离

增强的约束：

  • 在基本约束的基础上更进一步，扩展了对定位的控制能力，允许开发人员在水平和垂直方向上任意创建隐藏的辅助线，然后对照辅助线定位组件；
  • 辅助线分为约束行和约束列；
  • 约束行与约束列可以按照下列3中方法放到容器中：
  1. 固定约束 - 位置由绝对值来指定；
  2. 相对约束 - 位置根据容器大小和百分比来确定；
  3. 内容大小约束 - 位置是相对于内容大小而确定的。
  • 使用<mx:ConstraintColumn>和<mx:ConstraintRow>；
  • 只能基于Halo(MX)的Canvas容器使用这种模式；
  • Spark容器的组件都不支持这种增强约束，不过当放到使用这类约束的MX容器中时，Spark组件在约束列和约束行下的效果和预期一致；
  • 示例：

两行固定分割

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<mx:Canvas width="100%" height="100%">
		<mx:constraintColumns>
			<mx:ConstraintColumn id="col1" width="200"/>
			<mx:ConstraintColumn id="col2" width="50"/>
		</mx:constraintColumns>
		<s:Button label="Button1" left="col1:0"/> <!-- 将col1用作ConstraintColumn，向左偏移0 -->
		<s:Button label="Button2" left="col2:0"/> <!-- 将col2用作ConstraintColumn，向左偏移0 -->
	</mx:Canvas>

</s:Application>

带有左右约束的两列固定分割

<s:Button label="Button1" left="col1:0" right="col1:0"/>
<s:Button label="Button2" left="col2:0" right="col2:0"/>

带有上下约束的两行固定分割

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<mx:Canvas width="100%" height="100%">
		<mx:constraintRows>
			<mx:ConstraintRow id="row1" height="50%"/>
			<mx:ConstraintRow id="row2" height="100"/>
		</mx:constraintRows>
		<s:Button label="Button1" top="row1:0" bottom="row1:0"/>
		<s:Button label="Button2" top="row2:0" bottom="row2:0"/>
	</mx:Canvas>

</s:Application>

有偏移的两行加两列分割

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<mx:Canvas width="100%" height="100%">
		<mx:constraintColumns>
			<mx:ConstraintColumn id="col1" width="100"/>
		</mx:constraintColumns>
		<mx:constraintRows>
			<mx:ConstraintRow id="row1" height="50"/>
			<mx:ConstraintRow id="row2" height="50"/>
		</mx:constraintRows>
		<s:Button label="Button1" left="col1:0" right="col1:0" top="row1:0" bottom="row1:0"/>
		<s:Button label="Button2" left="col1:10" right="col1:10" top="row2:0" bottom="row2:0"/>
	</mx:Canvas>

</s:Application>

基于内容大小的约束

  • 该约束会在不指定约束的height和width属性值时自动启动；
  • 该约束下，所有项目会缩放至列宽或行高，列宽和行高则由容器的最大项目决定。
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<mx:Canvas width="100%" height="100%">
		<mx:constraintColumns>
			<mx:ConstraintColumn id="col1" />
			<mx:ConstraintColumn id="col2" />
		</mx:constraintColumns>
		<mx:constraintRows>
			<mx:ConstraintRow id="row1" height="50"/>
			<mx:ConstraintRow id="row2" height="30"/>
		</mx:constraintRows>
		<s:Button label="Button1" left="col1:0" top="row1:0" width="200"/>
		<s:Button label="Button2" left="col1:0" top="row2:0"/>
		<s:Button label="Button3" left="col2:0"/>
	</mx:Canvas>

</s:Application>

自动布局

HorizontalLayout和HorizontalLayout

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<s:Group>
		<s:layout>
			<s:HorizontalLayout/>
		</s:layout>
		<s:Button label="BTN1"/>
		<s:Button label="BTN2"/>
	</s:Group>
	<s:Group>
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
		<s:Button label="BTN1"/>
		<s:Button label="BTN2"/>
	</s:Group>
</s:Application>

TileLayout

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:layout>
		<s:TileLayout orientation="columns" requestedRowCount="2" />
	</s:layout>

	<s:Button label="btn1"/>
	<s:Button label="btn2"/>
	<s:Button label="btn3"/>
</s:Application>

<mx:Spacer/>

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:layout>
		<s:HorizontalLayout />
	</s:layout>

	<s:Button label="btn1"/>
	<mx:Spacer width="50%"/>
	<s:Button label="btn2"/>
	<mx:Spacer width="50%"/>
	<s:Button label="btn3"/>
</s:Application>

组件的大小

  • 固定大小：设置固定值，单位为像素；
  • 可变大小：设置百分比，实现相对于所在容器的大小缩放；

容器

Spark中新添加的容器：

Application - Flex应用程序的主容器，也是初始容器

  • preloader属性，显示启动Flex程序时看到的进度条，默认打开
  • Application是应用程序的顶级对象，因此可以用来装载全局变量和函数，从而能够在程序的任何地方访问他们
  • 一个应用程序只能有一个<s:Application />容器
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   xmlns:local="*"> <!-- 定义本地命名空间 -->
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			[Bindable]
			public var hello:String = "hello!!!";
		]]>
	</fx:Script>
	<local:CustomComponent />
</s:Application>

CustomComponent.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
		 xmlns:s="library://ns.adobe.com/flex/spark"
		 xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.core.FlexGlobals;
		]]>
	</fx:Script>
	<s:Button label="{FlexGlobals.topLevelApplication.hello}"/>
</s:Group>

Group

  • 需要与布局类结合起来使用；
  • 为减少代码量，还有<s:Hgroup/>和<s:Vgroup/>可供使用。

SkinnableContainer - 支持换肤功能的Group

  • 需要单独的皮肤文件，

CoolSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">

    <!--- 定义支持状态 -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

	<!--- 背景中使用的矩形 -->
    <s:Rect height="100%" width="100%">
        <s:fill>
			<s:LinearGradient>
				<s:entries>
					<s:GradientEntry color="#92A1B9"/>
				</s:entries>
			</s:LinearGradient>
        </s:fill>
    </s:Rect>

    <s:Group id="contentGroup" left="5" right="5" top="5" bottom="5" >
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
    </s:Group>

</s:SparkSkin>
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   xmlns:local="*"> <!-- 定义本地命名空间 -->
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:SkinnableContainer skinClass="CoolSkin"><!--- 指定皮肤 -->
		<s:layout>
			<s:HorizontalLayout/>
		</s:layout>
		<s:Button label="button 1"/>
		<s:Button label="button 2"/>
	</s:SkinnableContainer>
</s:Application>

Panel - 基于 SkinnableContainer，是其子类，多了标题栏和一个框架

  • 经常用作整个应用程序的顶级容器，支持嵌套
  • 优势在于，其在窗口上添加了一个标题栏和一个状态栏，默认还会绘制出子对象的边框
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   xmlns:local="*"> <!-- 定义本地命名空间 -->
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:Panel title="My Panel">
		<s:HGroup top="5" bottom="5" left="5" right="5">
			<s:Button label="button1"/>
			<s:Button label="button2"/>
		</s:HGroup>
	</s:Panel>
</s:Application>

DataGroup和SkinnableDataContainer

  • DataGroup 用于数据集合（如数组），使用项渲染器渲染这些数据，从而能够自定义显示；
  • 项渲染器也是一个组件；
  • SkinnableDataContainer 是 DataGroup 的可换肤版本；
  • 在使用这两个组件时，需要把数据发送给它们的dataProvider属性；
  • 提供的数据可以是集合形式的，如ArrayCollection，还可以包含任何元素，如字符串，按钮或图形；
  • 可以使用的两个项渲染器：
  1. spark.skins.spark.DefaultItemRenderer 简单文本；
  2. spark.skins.spark.DefaultComplexItemRenderer Group容器内显示，只有在数据中包含可是组件，如按钮、图像时，渲染才有效
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   xmlns:local="*"> <!-- 定义本地命名空间 -->
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			[Bindable]
			public var $data:ArrayCollection = new ArrayCollection(["item1", "item2", "item3"]);
		]]>
	</fx:Script>
	<s:DataGroup dataProvider="{$data}"
				 itemRenderer="spark.skins.spark.DefaultItemRenderer">
		<s:layout>
			<s:HorizontalLayout/>
		</s:layout>
	</s:DataGroup>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   xmlns:local="*"> <!-- 定义本地命名空间 -->
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<s:ArrayCollection id="$data">
			<s:Button label="button 1"/>
			<s:Button label="button 2"/>
			<s:Button label="button 3"/>
		</s:ArrayCollection>
	</fx:Declarations>
	<s:DataGroup dataProvider="{$data}"
				 itemRenderer="spark.skins.spark.DefaultComplexItemRenderer">
		<s:layout>
			<s:HorizontalLayout/>
		</s:layout>
	</s:DataGroup>
</s:Application>

Canvas容器

  • 基于Halo(MX),轻量级，功能不强大；
  • 一般用于使用了增强约束的场景。

ApplicationControlBar

  • MX组件，类似还有ControlBar，但是Spark Panel的属性controlBarContent和controlBarLayout可以实现与ContralBar类似的效果；
  • 此容器给应用程序添加一个控制栏；
  • 需要与Application容器配合使用。
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   xmlns:local="*"> <!-- 定义本地命名空间 -->
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:Panel title="My Panel">
		<s:HGroup top="5" bottom="5" left="5" right="5">
			<s:Button label="button1"/>
			<s:Button label="button2"/>
		</s:HGroup>
	</s:Panel>
</s:Application>

DivedeBox、HDivedeBox 和 VDivedeBox

  • Halo(MX)组件，允许用户控制大小的调整，类似于HTML中的frame；
  • 用户通过鼠标拖动分隔条来调整窗口大小，支持嵌套使用；
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   xmlns:local="*"> <!-- 定义本地命名空间 -->
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:Panel title="Report Dashboard" verticalCenter="0" horizontalCenter="0">
		<mx:DividedBox direction="horizontal" width="100%">
			<s:VGroup height="100%">
				<mx:Text text="Catogries" fontWeight="bold"/>
				<s:Button label="Finance" width="100%"/>
				<s:Button label="Operations" width="100%"/>
			</s:VGroup>
			<mx:VDividedBox width="50%" height="100%">
				<s:VGroup width="100%">
					<mx:Text text="Finance Reports" fontWeight="bold"/>
					<mx:Text text="2008 Q1 sales" />
					<mx:Text text="2008 Q2 sales" />
				</s:VGroup>
				<s:VGroup width="100%">
					<mx:Text text="Finance Reports2" fontWeight="bold"/>
					<mx:Text text="2008 Q1 sales" />
					<mx:Text text="2008 Q2 sales" />
				</s:VGroup>
			</mx:VDividedBox>
		</mx:DividedBox>
	</s:Panel>
</s:Application>

Form容器

  • 支持在每个表单输入字段旁添加标签(label);
  • 纯粹用作布局，不一定包含表单项；
  • Form容器包含三个组件：
  1. Form主容器
  2. FormHeader组件，可选，为表单中相应分区添加标题
  3. FormItem 用于将文本与每个表单输入字段关联
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   xmlns:local="*"> <!-- 定义本地命名空间 -->
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<mx:Form>
		<mx:FormHeading label="Contact Info"/>
		<mx:FormItem label="First Name">
			<s:TextInput/>
		</mx:FormItem>
		<mx:FormItem label="Last Name">
			<s:TextInput/>
		</mx:FormItem>
	</mx:Form>
</s:Application>

Grid容器

  • 包含Grid，GridRow和GridItem标签
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   xmlns:local="*"> <!-- 定义本地命名空间 -->
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<mx:Grid>
		<mx:GridRow>
			<mx:GridItem>
				<s:Button label="Rewind"/>
			</mx:GridItem>
			<mx:GridItem>
				<s:Button label="Play"/>
			</mx:GridItem>
			<mx:GridItem>
				<s:Button label="Forward"/>
			</mx:GridItem>
		</mx:GridRow>
		<mx:GridRow>
			<mx:GridItem colSpan="3">
				<s:Button label="STOP" width="100%"/>
			</mx:GridItem>
		</mx:GridRow>
	</mx:Grid>
</s:Application>
时间： 2024-10-23 08:07:23

布局和容器的相关文章

Flex元素布局规则总结，以及布局和容器

一.Flex中的元素分类从功能层面可以把Flex中的元素分为组件(Components)和容器(Containers)两大类:组件 - 是指那类具有明确交互或数据展示功能的元素,例如Button.Checkbox.Datagrid.List等.容器 - 是指那类用来放置其他元素的元素,容器往往不具有特定的交互功能,主要的功能就是容纳元素.容器再细分又可以分为布局(Layout)容器和导航(Navigator)容器,其中布局容器的功能就是用来布局界面元素的,例如Application.Panel等

winform 布局、容器

一.布局 属性:1.Anchor:  绑定控件到容器边缘位置保持不变 注:四周全锁定时控件随界面变化时变大 2.Dock:绑定到容器的边缘 注:下控件到边需先将下控件定义到边再将左右控件新建.到边 3.Location:控件当前位置 二.容器 1.Panel:基本控件容器空间 2.FlowLayoutPanel:控件流式布局的控件容器 配合AutoSize(根据内容调整大小) 3.GroupBox:带标题的控件容器 4.TabControl:带选项卡的控件容器 -TabPage:选项卡编辑集合

Dojo学习笔记（十）：Dojo布局——堆叠容器

可以把小部件层叠在一起,而一次只显示一个屏面. 1 dijit.layout.AccordionContainer AccordionContainer 顾名思义是像手风琴一样可以收缩的面板,这种方式比较适合单个portal的布局,小巧易用:也可以用于整个页面的布局. AccordionContainer申明方式样例: <!DOCTYPE HTML> <html> <head>     <meta charset="UTF-8">    

谈谈Ext JS的组件——容器与布局

概述 在页面中,比較棘手的地方就是布局.而要实现布局.就得有能维护布局的容器. 能够说,在我试过和使用过的Javascript框架中,Ext JS的布局是做得最优秀的一个,而这得益于它强大的容器类和丰富的布局类.在本文将介绍Ext JS的容器组合和布局类. 容器:Ext.container.Container 容器的主要功能是管理其内部的组件.因而在继承Ext.Component的所有功能的基础上.加入了相应的用来处理内部组件的方法add.insert.remove和removeAll. 在配置

Android 自定义ViewGroup（自定义布局容器）

1.先创建一个控件类间接或者直接继承ViewGroup类 2.重载onMeasure方法来测量控件 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) 3.重载onLayout方法来布局子空间 protected void onLayout(boolean changed, int l, int t, int r, int b) 4.重载返回ViewGroup.LayoutParams的方法 public V

flex 布局下关于容器内成员 flex属性的理解

flex布局分为容器的设置和容器内成员的设置,容器的设置是管理成员的排列方式,也就是管理排列的方向和对齐的位置.成员的设置则是关于成员的大小和显示的位置(order). 弹性布局,弹性布局,自然要提现他的弹性,所谓弹性也就是对空间的分配.成员设置中的flex属性,就是对于额外空间的管理. flex可以设置三个值,第一个值必选,后两个可选. flex的第一个值 可以用flex-grow单独设置,代表含义是对额外空间的占据量,所谓额外空间就是这一行多余的空间,有多余的空间这一属性才有用.默认值是0,

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器.我们提供了两个作此用处的类.注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套. .container 类用于固定宽度并支持响应式布局的容器. Copy <div class="container"> ... </div> .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器. Copy <div class=&q

elementUI 学习入门之 container 布局容器

Container 布局容器 用于布局的容器组件,方便快速搭建页面基本结构 <el-container> : 外层容器.当子元素包含 <el-header> 或 <el-footer> 时,全部子元素会垂直上下排列,否则水平左右排列 <el-header> : 顶栏容器 <el-aside> : 侧边栏容器 <el-main> : 主要区域容器 <el-footer> : 底边栏容器 这些组件均采用 flex 布局.<

iOS界面布局的核心以及TangramKit介绍

前言 TangramKit是iOS系统下用Swift编写的第三方界面布局框架.他集成了iOS的AutoLayout和SizeClass以及Android的五大容器布局体系以及HTML/CSS中的float和flex-box的布局功能和思想,目的是为iOS开发人员提供一套功能强大.多屏幕灵活适配.简单易用的UI布局解决方案.Tangram的中文即七巧板的意思,取名的寓意表明这个布局库可以非常灵巧和简单的解决各种复杂界面布局问题.他的同胞框架:MyLayout是一套用objective-C实现的界面