写在前面

#web前端面试题#面试中经常会被问道前端布局的实现。相信做前端的朋友们都会需要在日常的工作中需要遇到页面排版样式布局的细节处理。前端样式布局比较经典的布局方式无外乎是以下几种，各有优缺点(下次可以单独写一个系列进行交流哈)

• 浮动布局 float
• 绝对定位布局 absolute
• 固定定位布局 fixed
• Grid方案
• table 布局
• 媒体查询布局
• 弹性盒子布局 flex
• 百分比布局
• rem 布局

上面提及到布局方案每个都是很经典的，每个单独拿出来写都可以单独开课学习。

好戏开始

今天我们着重复习下，移动端开发的神器 flex布局，flex学习其实最高效的方式我总结下来就几点比较实用的窍门，

第一 多看阮神的大作 学习flex的骨灰级秘籍

第二 多练结合属性值强化记忆

第三 掌握常用的处理场景封装到真实的实战项目中复用

其实学习flex布局并不难，但是你要去理解，下面我谈谈对于这种布局的使用体验吧。从flex布局的表象含义来看 flex 是弹性伸缩的意思，其实从这点来看他对于浏览器的兼容性是有一定要求的。我记得它最早是在2009提出来的吧，pc端的管理平台或者早期的政府部门的页面就不太适合采用这种布局模式，它是随着时代发展而生的产物。flex 引入了“容器”，“项目”的概念，容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。flex在实际使用中最核心的是容器上的属性和项目元素的属性。

flex容器的属性

以下6个属性设置在容器上。

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

项目的属性

以下6个属性设置在项目上。

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

文章小结

内容比较干，建议学习flex布局的小伙伴们自行翻阅阮一峰的大作，这篇文章只是对flex布局的核心的知识点列了一个大纲开了一个头，未逐点展开举例，写这篇文章的目的是为了给前端学习者一点点启示以及对自己学习心得的有效记录方便回溯知识体系，网上的学习素材很多，只有融汇贯通，学以致用才能更好的为开发服务，欢迎一起交流学习。 「链接」