全面了解flex的用途

一、可以利用flex来布局一个div在另一个div里面水平垂直居中

如：html代码：　

<div class="container">
	<div class="box">

	</div>
	</div>

css代码：

.container{
	width:600px;
	height:400px;
	border:1px solid blue;
	display: flex;
	justify-content:center;
	align-items:center;
	}
	.box{
	width:200px;
	height:100px;
	border:1px red solid;

ps:这样就可以水平垂直居中咯

二、flex的属性

<div class="items">
	<div class="item">1</div>
	<div class="item">23</div>
	<div class="item">4</div>
	</div>

可以写在items上的属性有六个：

•flex-direction
•flex-wrap
•flex-flow
•justify-content
•align-items
•align-content

可以写在item上的有6个：

•order//这个就是item单独给了,要是想让那个item调换顺序就给这个属性给那个item
•flex-grow
•flex-shrink
•flex-basis
•flex
•align-self

以上就是小编为大家带来的全面了解flex的用途全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • Flex 获取每月第几周小例子

    <pre name="code" class="html">private function calcWeekTotal(showDate:Date):Array{ showDate = DateFormatter.parseDateString("2013-04-01"); //获取本月1好的日期 var oneDate:Date = new Date(showDate.fullYear,showDate.month,1); //本

  • Flex 遍历Object键和值的示例代码

    遍历键 for(var k:String in obj) { trace("Key: " + k + " - value: " + obj[k]); } 遍历值 for each(var v:* in obj) { trace("Value: " + v); }

  • Flex 自定义DataGrid实现根据条目某一属性值改变背景颜色

    自定义拓展的DataGrid(as类)代码如下: package czgh.components { import flash.display.Sprite; import mx.controls.DataGrid; import mx.core.UIComponent; public class OptionalDataGrid extends DataGrid { private var _rowColorFunction:Function; private var _customed:Bo

  • Flex DataGrid 伪合并单元格实现思路

    <?xml version="1.0" encoding="utf-8"?> <s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" widt

  • flex 遍历Object对象内容的实现代码

    一直以为遍历Object只能obj.name这种方式,今天做数据比较,才发现 复制代码 代码如下: var g2:Object = expensesAC.getItemAt(0);        for(var i:Number=0;i<=23;i++){         if(g2["times"+i]=="0"){             num--;         }else{            d2g+=g2["times"+

  • Flex4 DataGrid中嵌入RadioButton实现思路及代码

    <s:DataGrid id="viewDg" width="100%" height="100%" fontFamily="微软雅黑" horizontalScrollPolicy="off" borderVisible="false" dataProvider="{viewList}"> <s:columns> <s:ArrayLis

  • 全面了解flex的用途

    一.可以利用flex来布局一个div在另一个div里面水平垂直居中 如:html代码: <div class="container"> <div class="box"> </div> </div> css代码: .container{ width:600px; height:400px; border:1px solid blue; display: flex; justify-content:center; ali

  • Flex中对表格某列的值进行数字格式化并求百分比添加%

    Flex中对表格某列的值进行数字格式化并求百分比添加%

    1.问题背景 一般的,需要对表格中某列的数值进行格式化,对该数值乘以100,并保留两位小数,添加"%" 2.实现实例 <?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"

  • Flex中对表格中某列的值进行数字格式化保留两位小数

    Flex中对表格中某列的值进行数字格式化保留两位小数

    1.问题背景 一般的,表格中展示的比率,对比率的处理是:保留两位小数,并向上保留 2.实现实例 <?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="libr

  • Flex中怎么给表格中的滚动条定位避免刷新回到原处

    Flex中怎么给表格中的滚动条定位避免刷新回到原处

    1.问题背景 如果表格中的字段过多,会出现滚动条,在将滚动条滚到一定的位置时,重新刷新表格,滚动条会回到原处,原来查看的字段还得继续滚动,才能查看到. 2.实现实例 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/f

  • Flex 输出文件到本地的两种方法

    在flex中输出文件到本地目前我用到两种方法,分别是File和FielRefreence 例子: var exportString:String = "这就是一个测试" 1.File输出 复制代码 代码如下: var ff:File = File.desktopDirectory.resolvePath("Progress.CSV"); ff.addEventListener(Event.SELECT,exportCSVSelectedHandler); ff.br

  • Flex设置LinkButton的背景色有思路有源码

    Flex设置LinkButton的背景色有思路有源码

    1.设计思路 由于Flex中没有设置LinkButton的背景色的属性,现在得从两个方面入手:第一,直接通过调用样式方法画出LinkButton的背景色:第二,设置LinkButton的背景图片.这里,讲述的是第一种方法 2.设计源码 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xml

  • Flex播放器(实现播放、缓冲进度条和音频曲线显示)

    Flex播放器(实现播放、缓冲进度条和音频曲线显示)

    一时兴起,玩起了Flex,本来还想要做个Flex博客,不过目前还只能在里面树个公告...没办法做完啊,河蟹的个杯具的!Flex布局不像是CSS,精美Flash动画不是拖一个两个控件就能做出来滴,而是一笔一条线绘制出来滴!这些我都还不熟悉,所有折腾快一个星期了,每天都是搞到头大才睡觉,今天终于能出一个简单的播放器. 一直很喜欢音乐这个东西,喜欢Jay,更喜欢他的歌,也很崇拜小猪,他的一段灰色空间曾让我激流奋进,想过自己能做个播客放自己喜欢听的歌曲,出于自恋那样会更有一点点满足感.呃~走神了,前二天

  • 深入浅析Mybatis与Hibernate的区别与用途

    有很长一段时间对mybatis是比较陌生的,只知道与Hibernate一样是个orm数据库框架.随着使用熟练度的增加,发现它与Hibernate区别是非常大的,应当结合不同的情况分析选用. 有很长一段时间对mybatis是比较陌生的,只知道与Hibernate一样是个orm数据库框架.随着使用熟练度的增加,发现它与Hibernate区别是非常大的,应当结合不同的情况分析选用.结合至今为止的经验,总结出以下几点: 1. hibernate是全自动,而mybatis是半自动 hibernate完全可

  • Flex中Array的IndexOf 的作用示例介绍

    Flex中 Array 的IndexOf 的作用 1.说明 indexOf用于在索引中从小到大查找,如果查得到就返回索引值,查不到就返回-1: 2.实例 (1)设计源码 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://n

随机推荐