考点介绍：
在移动端，Flex已经变成最流行的布局模型，虽然不能完全替代普通盒子模型，但是第一的位置已经坐稳。在校招中，弹性布局也是重要的考查点，包括对弹性的理解，以及各种样式的实现
本期分享的前端布局模块之Flex弹性布局，分为试题、文章以及视频三部分。
答案详情解析和文章内容可扫下方二维码或链接即可查看！
一、考点题目
1.使用CSS的flexbox布局，不能实现以下哪一个效果：
A.三列布局，随容器宽度等宽弹性伸缩 B.多列布局，每列的高度按内容最高的一列等高 C.三列布局，左列宽度像素数确定，中、右列随容器宽度等宽弹性伸缩 D.多个宽高不等的元素，实现无缝瀑布流布局
正确答案：
Flexbox可以简单快速的创建一个具有弹性功能的布局，当在一个小屏幕上显示的时候，Flexbox可以让元素在容器(伸缩容器)中进行自由扩展和收缩，从而容易调整整个布局。它的目的是使用常见的布局模式，比如说三列布局，可以非常简单的实现。
2.Flex布局和Bootstrap布局两者的比较
A.IP地址到网络设备名字的映射 B.IP地址到网络硬件地址的映射 C.网络设备名字到IP地址的映射 D.网络硬件地址到IP地址的映射
正确答案：
在Bootstrap中采用12栅格的布局，12份随意分配，但是不能解决5等分，7等分的问题。所以flex布局来协助。
3.使用flex怎么实现元素的水平居中和垂直居中？
正确答案：
水平居中：
.box { display: flex; justify-content: center; }
（答案点击下方链接或者扫海报二维码查看哦）
二、考点文章
1.Flex布局总结(详细)
以前在网页开发过程中，布局一直是不可或缺的，从最早的表格布局，到后来的DIV+CSS布局，现在再到CSS3的伸缩布局。最近在写小程序的项目中flex布局用得非常多，其适应性也非常强，其强大的伸缩性，发挥了极大的作用，因此就在这里整理一下flex布局的知识。
2.一劳永逸的搞定 flex 布局(上）
一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在 float: center 的写法，那么 text-align: center、verticle-align: center 是否可行呢？答案也是否定的。这两个属性只能用于行内元素，对于块级元素的布局是无效的。
3.一劳永逸的搞定 flex 布局（下）
flex 布局的全部属性，一共 12 个，父容器、子容器各 6 个。
（扫下方海报二维码查看完整版）
三、考点视频
更多资讯可搜索校招VIP小程序查看哦。
移动端链接：m.xiaozhao.vip/dTopic/deta…
PC端链接：xiaozhao.vip/dTopic/deta…
