flex布局学习笔记（flex布局教程）

前端笔试⾯试经常会问到：不定宽⾼如何⽔平垂直居中。最简单的实现⽅法就是flex布局，⽗元素加上如下代码即

可： display: flex; justify-content: center; align-items :center; 。下⾯详细介绍下flex布局吧。

　　2009年，W3C提出了 Flex布局，可以简便⼂完整⼂响应式地实现各种页⾯布局。⽬前已得到了所有浏览器的⽀持，这意味着，现在就能很安全地使⽤这项功能。Flex布局将成为未来布局的⾸选⽅案。

　　

Flex 是 Flexible Box 的缩写，意为“弹性布局”，⽤来为盒装模型提⾼最⼤的灵活性。任何⼀个容器都可以指定为 Flex 布局，需要设置 display: flex; 即可；⾏内元素也可以使⽤ Flex布局， display: inline-flex; ；webkit内核的浏览器，要加上 -webkit-前缀。

flex容器（⽗元素）有6个属性：flex-direction；flex-wrap；flex-flow；justify-content；align-items；align-content；

　　flex-direction属性决定主轴的⽅向（即项⽬的排列⽅向）。有4个值：

　　　　row（默认值）：主轴为⽔平⽅向，起点在左端。

　　　　row-reverse：主轴为⽔平⽅向，起点在右端。

　　　　column：主轴为垂直⽅向，起点在上沿。

　　　　column-reverse：主轴为垂直⽅向，起点在下沿。

　　f