Flex是什么？_随笔

Flex是Adobe开发的一种RIA，富互联网应用

用Flex开发的东西都可以使用Flash做出来

但是Flex主要是面向的程序开发人员，前台使用ActionScript和MXML

后台可以使用J2EE ASP.NET PHP等

详细的你可以看一下百度百科http://baike.baidu.com/view/623340.htm

说明：大家在看d性布局这一块，最好按照从上到下一点一点看，因为上下联系比较紧密。

想看我的原文地址，请点击这里。

d性布局基本概念

任何一个容器都可以设置d性布局，一旦容器设置了 d性布局以后，子元素的float、clear和vertical-align属性将失效。

如果设置容器的水平方向为主轴，则垂直方向为交叉轴。

如果设置容器的垂直方向为主轴，则水平方向为交叉轴。

d性布局父类容器常用属性

设置容器为d性布局 display

display：flex 设置块元素为d性布局

display：inline-flex 设置行内元素为d性布局

子元素排列方向 flex-direction

flex-direction : row（默认值）

设置容器的水平方向为主轴，垂直方向为交叉轴，起点在左端，子元素在主轴上从左向右排列。

flex-direction : row-reverse

设置容器水平方向为主轴，垂直方向为交叉轴，起点在右端，子元素在主轴上从右向左排列。

flex-direction : column

设置容器垂直方向为主轴，水平方向为交叉轴，起点在上端，子元素在主轴上从上向下排列。

flex-direction : column-reverse

设置容器垂直方向为主轴，水平方向为交叉轴，起点在下端，子元素在主轴上从下向上排列。

子元素换行方式 flex-wrap

子元素换行是相对于主轴来说的。

flex-wrap ：nowrap（默认）

子元素不换行，当子元素宽度超过父类，会压缩子元素的宽度。

<html>

<head>

<style>

.box{

width: 800px

height: 500px

border: 5px solid red

display: flex

flex-direction: row

flex-wrap :nowrap

}

.boxSelf{

width: 100px

height: 50px

border: 5px solid red

}

</style>

</head>

<body>

</div>

</body>

</html>

flex-wrap ：wrap

子元素换行，在交叉轴上等距离平分。自己感受换行方式。

flex-wrap ：wrap-reverse

子元素换行，在交叉轴上等距离平分。自己感受换行方式。

在主轴上子元素对齐方式justify-content

justify-content ：flex-start（默认值）

设置子元素子在主轴起点对齐

<html>

<head>

<style>

.box{

width: 800px

height: 500px

border: 5px solid red

display: flex

flex-direction: row

justify-content: flex-start

}

.boxSelf{

width: 100px

height: 50px

border: 5px solid red

}

</style>

</head>

<body>

</div>

</body>

</html>

justify-content ：flex-end

设置子元素子在主轴终点对齐

justify-content ：center

设置子元素子在主轴居中对齐

justify-content ：space-between

设置子元素子在主轴两端对齐，子元素之间的间隔都相等。

justify-content ：space-around

设置子元素子在主轴两侧的间隔相等。子元素之间的间隔比子元素与边框的间隔大一倍。

在交叉轴上子元素对齐方式align-items

align-items属性一般在单行使用

align-items：flex-start

设置子元素在交叉轴上起点对齐。

<html>

<head>

<style>

.box{

width: 800px

height: 500px

border: 5px solid red

display: flex

flex-direction: row

justify-content: flex-start

align-items: flex-start

}

.boxSelf{

width: 100px

height: 50px

border: 5px solid red

}

</style>

</head>

<body>

</div>

</body>

</html>

align-items：flex-end

设置子元素在交叉轴上的终点对齐。

align-items：center

设置子元素在交叉轴上居中对齐。

<html>

<head>

<style>

.box{

width: 800px

height: 500px

border: 5px solid red

display: flex

flex-direction: row

justify-content: flex-start

align-items:center

}

.boxSelf{

width: 100px

height: 50px

border: 5px solid red

}

</style>

</head>

<body>

</div>

</body>

</html>

align-items：baseline

设置子元素在交叉轴的第一行文字的基线对齐。

align-items：stretch（默认值）

如果子元素未设置高度或auto，子元素将占满整个容器的高度。

align-content

align-content属性一般在多行使用

align-content：flex-start

设置子元素在交叉轴上起点对齐。

<html>

<head>

<style>

.box{

width: 800px

height: 500px

border: 5px solid red

display: flex

flex-direction: row

justify-content: flex-start

flex-wrap: wrap

align-content: flex-start

}

.boxSelf{

width: 100px

height: 50px

border: 5px solid red

}

</style>

</head>

<body>

</div>

</body>

</html>

align-content：flex-end

设置子元素在交叉轴终点对齐。

align-content：center

设置子元素在交叉轴中点对齐。

align-content：space-between

子元素在交叉轴两端对齐，子元素在交叉轴之间的间隔相等。

align-content：space-around

子元素在交叉轴两侧的间隔相等，子元素之间的间隔比子元素与边框的间隔大一倍。

align-content：stretch（默认值）

如果子元素没有设置高度，子元素占满整个交叉轴。

d性布局子元素常用属性

子元素前后排列顺序order

子元素的 order 属性控制子元素前后排列顺序，默认值为0，order 属性值越小越排在前面。

<html>

<head>

<style>

.box{

width: 800px

height: 500px

border: 5px solid red

display: flex

flex-direction: row

flex-wrap: nowrap

}

.boxSelf{

width: 200px

height: 50px

border: 5px solid red

}

</style>

</head>

<body>

</div>

</body>

</html>

flex-grow

子元素的 flex-grow属性，设置子元素在主轴剩余份额的占比。

flex-shrink

当空间不够时，设置子元素的缩小比例

设置子元素的大小flex-basis

子元素的 flex-basis属性用来设置子元素在主轴的大小 (水平方向为主轴 flex-basis属性控制的就是宽度，垂直方向为主轴 flex-basis属性控制的就是高度) ，flex-basis属性优先级高于width属性或height属性。

子元素在交叉轴上对齐方式align-self

子元素的align-self属性值和 align-items属性值相同，只不过align-items是设置在父类容器上控制所有子元素在交叉轴的对齐方式，而align-self属性是单独设置在子元素上仅仅控制设置了 align-self属性的元素在交叉轴的对齐方式，align-self属性优先级高于 align-items属性。

flex (fast lexical analyser generator) 是 Lex 的另一个替代品。它经常和自由软件 Bison语法分析器生成器一起使用。Flex 最初由 Vern Paxson 于 1987 年用 C语言写成。 Flex 手册里对 Flex 描述如下: “flex是一个生成扫描器的工具，能够识别文本中的词法模式。flex读入给定的输入文件，如果没有给定文件名的话，则从标准输入读取，从而获得一个关于需要生成的扫描器的描述。此描述叫做规则，由正则表达式和 C代码对组成。flex 的输出是一个 C 代码文件--lex.yy.c--其中定义了 yylex() 函数。编译输出文件并且和 -lfl库链接生成一个可执行文件。当运行可执行文件的时候，它分析输入文件，为每一个正则表达式寻找匹配。当发现一个匹配时，它执行与此正则表达式相关的 C代码。” 一个相似的，用 C++语言的词法分析器生成器是 flex++,包含在 flex 软件包里。 Flex 不是 GNU 工程，但是 GNU 为 Flex 写了手册。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7118090.html

Flex是什么？

发表评论

评论列表（0条）