flexd性布局彻底掌握

flex布局又称为d性布局，相对于更早出来的float浮动布局更加方便，在兼容性方面还有不足，但随着很多浏览器版本的淘汰，今后的flex布局会被更加广泛使用。在掌握flex布局前先认识两个概念。

1.flex container

2.flex items

如图所示：

flex布局包含两个重要的轴，main axis和cross axis，各自起点、终点分别对应strat和end。了解到flex布局的基本原型后，我们来看看其属性，属性又分为flex container的属性和flex items的属性，如下图：

默认情况下flex的排列方向为main start到main end，当切换到其他属性时：

flex-direction：row-reverse

flex-direction：column-reverse

1.2justify-content属性

justify-content属性表示flex items在main axis上的对齐方式，其值有center、flex-start、flex-end、space-between、space-around。

justify-content：center

justify-content：flex-end

justify-content：space-between

是每个items间隔相等

justify-content：space-around

items间的间隔是边缘间隔的两倍

1.3align-items

align-items属性决定了items在cross axis的对齐方式，属性值有stretch、flex-start、flex-end、center、baseline

stretch属性值为align-items的默认属性：当items在cross axis方向的size为auto时，会将其自动拉伸填充整个flex container，如：

align-items：flex-start

items与cross start对齐

1.4flex-wrap

flex-wrap属性是控制items换行的，其属性值有：nowwrap、wrap、wrap-reverse

flex-wrap：nowwrap默认值不换行，每个items会自动调整宽度填充完整个flex container

1.6align-content

align-content：flex-start（这就解决了上述中换行没有紧挨的问题）

align-content：flex-end

align-content：center

align-content：space-between（两端cross start 与cross end对齐）

align-content：space-around（与justify-content一样）

align-content：space-evenly

二、flex items上的css属性

2.1order

order属性决定items之间的排列的先后顺序，如图将原本排列的模块倒序排列如下所示，可知order越小排在越前。

2.3flex-grow

flex-grow属性用来对items的宽度进行放大，默认值为0，这里3个items的初始宽度为100px，离flex container边缘还有200px，当将3个items的flex-grow设置为1时，则每个items的宽度增加200px的三分之一，如：

<!-- 系统菜单 -->

<mx:MenuBar id="menu" right="10" labelField="modName"

itemClick="loadModule(event)"

/>

<!-- 模块组件 -->

<s:ModuleLoader id="modLoader" top="30" bottom="0" left="0" right="0"

ready="onModuleLoaded()"/>

/**

* 单击菜单项，加载模块

*/

protected function loadModule(event:MenuEvent):void

{

object=null

pickHangObject = null

var modId:int = event.item.modId

if(modId == -100) {

return logout()

}

var modType:int = event.item.modType

var modUrl:String = event.item.modUrl

// 如果是模块，则用ModuleLoader加载

if(modType == 1 &&　currentUrl != modUrl){

loading.visible = true

var mod:Module = Module(modLoader.child)

// 如果模块有定义挂起函数，则使旧模块的挂起，用以切换新的模块

if(mod &&mod.hasOwnProperty("suspend")) {

mod["suspend"].call()

}

modLoader.unloadModule()

modLoader.loadModule(modUrl)

currentUrl = modUrl

}

// 如果是组件，则用PopUpManager加载

else if(modType == 2) {

var c:Class = getDefinitionByName(modUrl) as Class

var x:IFlexDisplayObject = PopUpManager.createPopUp(this, c)

PopUpManager.centerPopUp(x)

}

}

---