css3学习之display:flex

2015-06-03

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。对于很多应用来讲，弹性盒改进了盒模型，既不使用浮动，也不会在弹性盒容器与其内容之间合并外边距。

弹性盒布局的定义中，它可以自动调整子元素的高和宽，来很好的填充任何显示设备中的可用显示空间，收缩内容防止内容溢出。

不同于盒布局的基于垂直方向以及行内布局的基于水平方向，弹性盒布局的算法是方向无关的。虽然盒布局在页面中工作良好，但是其定义不足以支持那种需要根据用户代理从竖直切换成水平等变化而进行方向切换、大小调整、拉伸、收缩的引用组件。不同于将要出现的网格布局针对目标为大比例布局，弹性盒布局更适用于应用组件和小比例布局。这两种都是CSS工作组为了能与不同用户代理、不同书写模式和其他弹性需要进行协作而做出的努力。

兼容如下

CSS Syntax
1
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
弹性容器

弹性子元素的父元素。通过设置display属性的值为flex或inline-flex将其定义为弹性容器。

弹性子元素

弹性容器的每一个子元素变为一个弹性子元素。弹性容器直接包含的文本变为匿名的弹性子元素。

轴

每个弹性盒布局以两个轴来排列。弹性子元素沿着主轴依次相互排列。侧轴垂直于主轴。

属性 flex-direction 定义主轴方向。

属性 justify-content 定义了弹性子元素如何在当前线上沿着主轴排列。

属性 align-items 定义了弹性子元素如何在当前线上沿着侧轴排列。

属性 align-self 覆盖父元素的align-items属性，定义了单独的弹性子元素如何沿着侧轴排列。

方向

弹性容器的主轴开始、主轴结束和侧轴开始、侧轴结束边缘代表了弹性子元素排列的起始和结束位置。它们具体取决于由writing-mode（从左到右、从右到左等等）属性建立的向量中的主轴和侧轴位置。

属性 order 将元素依次分组，并决定谁先出现。

属性 flex-flow 是属性 flex-direction 和 flex-wrap 的简写，用于排列弹性子元素。

行

弹性子元素根据 flex-wrap 属性控制的侧轴方向（在这个方向上可以建立垂直的新线），既可以是一行也可以是多行排列。

不影响弹性盒子的属性

因为弹性盒子使用一种不同的布局逻辑，一些属性会在弹性容器上无效。

多列模块中的column-*属性对弹性子元素无效。

float 和 clear 对弹性子元素无效。使用 float 会导致 display 属性计算为 block.

vertical-align 对弹性子元素的对齐无效。

接下来看看flex的一些属性

flex-basis
属性flex-basis指定了项的初始值，CSS Syntax如下，查看DEMO
1
flex-basis: number|auto|initial|inherit;
flex-direction
属性flex-direction指定了项的排列方向，CSS Syntax如下，查看DEMO
1
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
flex-flow
属性 flex-flow 是属性 flex-direction 和 flex-wrap 的简写，用于排列弹性子元素，CSS Syntax如下，查看DEMO
1
flex-flow: flex-direction flex-wrap|initial|inherit;
flex-grow
属性 flex-grow 指定了在同一容器中，相对于其他项的增长数目，CSS Syntax如下，查看DEMO
1
flex-grow: number|initial|inherit;
flex-shrink
属性 flex-shrink 指定了在同一容器中，相对于其他项的减少数目，CSS Syntax如下，查看DEMO
1
flex-shrink: number|initial|inherit;
flex-wrap
属性 flex-wrap 指定了是否折行，CSS Syntax如下，查看DEMO
1
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

参考资料:
MDN使用 CSS 弹性盒
w3schoolsCSS flex Property