【备战春招】第2天 flex基础与应用(一)

课程名称：六个案例学会响应式布局

课程章节： flex基础与应用

课程讲师：大谷

课程内容：

什么是flex：FlexiableBox即是弹性盒子，用来进行弹性布局，可以配合rem处理尺寸的适配问题。

为什么用flex：

(1) 用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

(2) 更加符合响应式设计的特点。

初识flex：

如下图：flex有主轴和交叉轴以及主轴顶点和交叉轴顶点。图中还有主轴和交叉轴的交叉点。如果横向为主轴那么里面的子元素的宽度占主轴空间，高度占交叉轴的空间。如果纵向为主轴，那么原理为横向相反。

flex-direction的作用：子元素在父元素盒子中的排列方式。

属性值有以下几种：

(1) row：默认值，按从左到右的顺序显示。

(2) row-reverse：与row相同，但是以相反的顺序。

(3) column：灵活的项目将垂直显示，按从上到下的顺序。

(4) column-reverse：与column相同，但是以相反的顺序。

通过这个属性，我们可以实现盒子的排列顺序，如果想要实现盒子在浏览器右侧横向排列，可以参考下面代码片段：

如果想要实现浏览器左侧顺序排列，可以将row-reverse替换为row即可，对应的效果如下：

如果我们将row-reverse替换为column，那么显示的效果如下：

如果我们将row-reverse替换为column-reverse，那么显示的效果如下：

以上的代码我们需要注意的是，如果当我们给子元素不设置宽度时，那么子元素的宽度就是由内容决定的，如果我们设置子元素的总宽度超过了父元素，子元素也不会进行换行，子元素会平均父元素的宽度进行显示。

flex-wrap的作用：子元素在父元素盒子中是否换行(列)。

属性值有以下几种：

(1) nowrap：默认值，不换行或不换列。

(2) wrap：换行或换列。

(3) wrap-reverse：换行或换列，但以相反的顺序。

当我们想要实现父元素的宽度容纳不了子元素时，让子元素进行换行，我们就可以使用下面代码实现：

如果我们不想换行，可以将wrap换成nowrap或者将flex-wrap这行代码进行删除。

如果我们想要反顺序进行换行，我们可以将wrap替换为wrap-reverse，那么效果图如下：

上面两种属性还可以进行简写：

flex-flow的作用：flex-direction和flex-wrap属性的简写形式。

flex-flow的语法：flex-flow: <flex-direction> || <flex-wrap>。

课程收获：

这一章主要学习了flex中的flex-direction和flex-wrap以及flex-flow相关属性值。学习了这几个属性，我们可以实现一些网站的样式布局，我们可以通过属性值来控制元素显示的顺序以及是否需要换行显示。我们需要注意的是如果子元素没有设置宽度，那么宽度就是由子元素的内容决定的，而不是将父元素的宽度平均分给每个子元素。