flex布局根本语法的细致介绍
2009年，W3C提出了一种新的方案—-Flex规划，可以简捷、完全、响应式地实现各种页面规划。当前，它已经得到了所有阅读器的支撑，这意味着，此刻就能很平安地使用这项功效
1.什么是flex规划?
Flex是Flexible Box的缩写，意为”弹性规划”，用来为盒状模型供给最大的灵敏性.
flex规划 : .box{display:flex;}
行内元素也可以使用flex规划 : .box{display:inline-flex;}
Webkit内核的阅读器，必需加上-webkit前缀 : .box{display:-webkit-flex; display:flex;}
留意，设为Flex规划今后，子元素的float、clear和vertical-align属性将失效。
2.根本概念
Flex容器(flex container) : 采纳Flex规划的元素,称为flex容器.
Flex项目(flex item) : flex容器的所有子元素,主动成为容器成员,即flex项目.
容器的两根轴线 : 水平的主轴(main axis), 垂直的穿插轴(cross axis).
主轴(main axis) : 开端位置->main start, 完毕位置->main end, 项目默许沿主轴摆列.
穿插轴(cross axis) : 开端位置->cross start, 完毕位置->cross end
容器内的单个项目占据的主轴空间叫做->main size, 穿插轴空间叫做->cross size
3.FLex属性
flex属性分为容器属性和项目属性.
容器属性 : flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content
项目属性 : order, flex-grow, flex-shrink, flex-basis, flex, align-self
3.1容器属性
flex-direction : 决议主轴的标的目的(即项目摆列标的目的)
row : 水平标的目的,从左到右.(默许属性)
row-reverse : 水平标的目的,从右到左.
column : 垂直标的目的,从上到下.
column-reverse : 垂直标的目的,从下到上.
flex-wrap : 规定一条轴线排不下,怎样换行.
nowrap : 不换行(默许属性)
wrap : 换行,第一行在上边
wrap-reverse : 换行,第一行鄙人边,(只行数摆列相反,单行内照旧从左到右摆列,每一行都是).
flex-flow : 结合flex-direction和flex-wrap,写法如下
.box{flex-flow:column wrap-reverse}
justify-content : 定义项目在主轴上的对齐方式
flex-start : 左对齐(默许值),项目以主轴的起点对齐
flex-end : 右对齐,项目以主轴的终点
center : 居中
space-between : 两端对齐,项目之间间隔相等
space-around : 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
align-items : 定义项目在穿插轴的对齐方式(仅单行,多行对齐由align-content定义)
stretch : 假如项目未设定高度或设为auto，将占满整个容器的高度(默许值)
flex-start : 从上到下,以穿插轴的起点为基线,向终点延长
flex-end : 从下到上,以穿插轴的终点为基线,向起点延长
center : 穿插轴的中点对齐,项目的中点放在穿插轴的中点上
baseline : 以一行中每个项目的第一行文字停止对齐.
align-content : 定义了容器内有多行项目时沿穿插轴的对齐方式, 假如项目只要一根轴线，该属性不起作用
stretch : 轴线占满整个穿插轴(每行都有一条轴线), 默许属性
flex-start : 以穿插轴的起点对齐
flex-end : 以穿插轴的终点对齐
center : 以穿插轴的中点对齐
space-between : 多行项目在穿插轴上间隔均匀分布
space-around : 多行项目在穿插轴上两侧的间隔都相等。所以，项目在穿插轴上的间隔比项目与边框的间隔大一倍
注 : justify-content, align-items和align-content是容器的属性,而不是项目的属性,是设定一个容器内项目以轴线上的某一位置对齐
3.2项目属性
order : 定义项目的摆列次序,数值越小,摆列越靠前.默许值为0,写法如下
.item{order:5}
flex-grow : 定义属性项目放大比例,默许为1
假如所有项目的flex-grow属性都为1，则它们将等分剩余空间（假如有的话）。假如一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍
flex-shrink : 定义项目缩小比例,默许为1
假如所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。假如一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小.负值对该属性无效
flex-basis : 定义了在分配余外空间此前，项目占据的主轴空间（main size）,阅读器按照这个属性，运算主轴可否有余外空间。它的默许值为auto，即项目的原本大小
它可以设为跟width或height属性一样的值（比方350px），则项目将占据牢固空间
flex : 结合flex-grow, flex-shrink 和 flex-basis的属性, 默许值为0 1 auto, 引荐优先使用
该属性有两个快速值：auto (1 1 auto) 和 none (0 0 auto
align-self : 同意单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性, 默许值为auto，表示继承父元素的align-items属性，假如没有父元素，则等同于stretch
该属性大概取6个值，除了auto，其他都与align-items属性完全一致
【相关引荐：CSS视频教程】
以上就是flex规划根本语法的具体介绍的具体内容，更多请关注百分百源码网其它相关文章！
