1.Flex是什么?

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。

我就简单理解为html新款的盒子了...
在网上查了下资料,发现 Flex 主要是围着主轴来布局的。声明一个Flex盒子很简单,display: flex就成啦,但是需要注意一点,flex元素的子类也会强制为flex,并且display:block或者display:inline等属性会失败。

然后问题又来了,主轴这个鸡儿东西又是什么?
(决定主轴方向即排列方向)

flex-direction:row | row-reverse | column | column-reverse

我的简单理解就是一条直线,明确延伸方向的直线....

flex-direction: row 从左到右的主轴(默认)  #row(行)

flex-direction: row-reverse reverse的翻译是翻转,也就是从右到左。

flex-direction: column 从上到下的主轴   #column(列)

flex-direction: column-reverse 列的主轴方向翻转,同行翻转....

flex-wrap有几个属性nowrap,wrap,warp-reverse

属性描述
nowrap 默认值。规定灵活的项目不拆行或不拆列。
wrap规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse规定灵活的项目在必要的时候拆行或拆列,但是以相反的顺序。
initial设置该属性为它的默认值。
inherit从父元素继承该属性。

flex布局下做居中很简单,justify-content:center就行了。

以往我们垂直居中可能最简单的办法就是heightline-height相同或者父类元素设置dispaly:table, 子类设置成display:table-cell,vertical-align:middle一下.
但是flex下不用这么麻烦,可以用align-content:center一行代码搞定。