本文主要是介绍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
这篇关于flex布局学习笔记（flex布局教程）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
