【校招VIP】前端CSS之Flex弹性布局

考点介绍：

在移动端，Flex已经变成最流行的布局模型，虽然不能完全替代普通盒子模型，但是第一的位置已经坐稳。在校招中，弹性布局也是重要的考查点，包括对弹性的理解，以及各种样式的实现

本期分享的前端布局模块之Flex弹性布局，分为试题、文章以及视频三部分。

答案详情解析和文章内容点击下方链接即可查看！

一、考点题目

1.使用CSS的flexbox布局，不能实现以下哪一个效果：

A.三列布局，随容器宽度等宽弹性伸缩

B.多列布局，每列的高度按内容最高的一列等高

C.三列布局，左列宽度像素数确定，中、右列随容器宽度等宽弹性伸缩

D.多个宽高不等的元素，实现无缝瀑布流布局

解答：正确答案是 D，Flexbox可以简单快速的创建一个具有弹性功能的布局，当在一个小屏幕上显示的时候，Flexbox可以让元素在容器(伸缩容器)中进行自由扩展和收缩，从而容易调整整个布局。它的目的是使用常见的布局模式，比如说三列布局，可以非常简单的实现……

2.Flex布局和Bootstrap布局两者的比较

解答：在Bootstrap中采用12栅格的布局，12份随意分配，但是不能解决5等分，7等分的问题。所以flex布局来协助……

3.使用flex怎么实现元素的水平居中和垂直居中？

解答：见详情代码…………

二、考点文章

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 个……

4.盒子模型和弹性布局实现自适应布局

在常规的项目开发中，很多时候不使用响应式框架的前提下，都需要开发人员手动实现自适应，这个时候盒子模型的优势就体现了出来。盒子结构的合理嵌套，以及CSS样式的使用，就能实现简单的自适应布局……

三、考点视频

1.盒子模型和box-sizing属性