项目二十　flex布局和字体图标

项目二十　flex布局和字体图标

项目展示

骰子案例如图20.1所示，个人网站底部导航案例如图20.2所示。

图20.1　骰子案例

图20.2　个人网站底部导航的制作

教学内容

1. 认识flex

flex（flexible box），意为“弹性布局”，可叫伸缩布局，也可叫伸缩盒布局，还可叫弹性盒布局。用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

当将父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。

总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

2. flex布局原理

采用flex布局的元素，称为flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为flex项目（flex item），简称“项目”，如图20.3所示。

子容器可以横向排列，也可以纵向排列。

体验flex布局

flex布局原理

图20.3　flex容器

我们可以通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

3. flex父项常见属性

flex父项常见属性如表20.1所示。

表20.1

（1）flex-direction设置主轴方向。

在flex布局中，分为主轴和侧轴两个方向：默认主轴方向是X轴，水平向右，默认侧轴方向是Y轴，垂直向下，如图20.4所示。

图20.4　默认坐标方向

flex-direction设置主轴方向

主轴和侧轴是会变化的，就用flex-direction设置主轴方向，侧轴与它对应90°方向。而子元素是跟着主轴来排列的，如图20.5所示。

图20.5　主轴方向决定子元素的排列

（2）justify-content设置主轴上的子元素排列方式。

子元素在主轴上的排列方式

justify-content 属性定义了项目在主轴的对齐方式，使用前一定要确认好主轴的方向，如图20.6所示。

图20.6　主轴为X方向时，主轴上子元素的排列方式

（3）flex-wrap 换行。

在默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义了是否换行，flex布局中默认是不换行的，显示不下时，会缩小子元素强制在一行显示，如图20.7所示。

（4）align-items设置侧轴上的子元素排列方式（单行）。

该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项（单行）的时候使用，如图20.8所示。

子元素在侧轴（单行）排列、换行

图20.7　子元素换行

图20.8　侧轴上单行子元素的排列方式

（5）align-content 设置侧轴上的子元素的排列方式（多行）。

align-content设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况（多行），在单行下是没有效果的，如图20.9所示。

子元素在侧轴（多行）排列、连写

图20.9　侧轴上多行子元素的排列方式

align-content和align-items区别如下：

① align-items适用于单行情况，只有上对齐、下对齐、居中和拉伸。

② align-content适应于换行（多行）的情况（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。

③ 单行用align-items，多行用align-content。

注意：学会区分单行和多行，有了换行才是多行！

（6）flex-flow属性是flex-direction和flex-wrap属性的复合属性，即设置主轴方向和是否换行显示的连写。

flex-flow：column wrap；

4. flex子元素常见属性

（1）flex属性。flex属性定义子项目分配的剩余空间，用flex来表示占多少份数。

子项flex属性

有了这个属性，可平均分配子元素，子元素就可以不用指定宽度了。

如：* {

三个span在div中平均分成三份，各占一份。

网页常见布局如图20.10所示。

图20.10　网页常见布局

HTML部分如下：

（2）align-self控制子项自己在侧轴上的排列方式。align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

align-self：flex-end；

子项自己在侧轴上排列方式和顺序

运用结构伪类设置偶数盒子在（flex-end对齐）的方法：

span：nth-child（2n） {

align-self： flex-end；}

（3）order属性定义项目的排列顺序。

order属性定义项目的排列顺序如图20.11所示。

图20.11　order属性定义项目的排列顺序

5. 字体图标

（1）字体图标概念。

简单地说，字体图标就是一种特殊的字体，通过这种字体，显示给用户的就像一个个图片一样，如图20.12所示。

字体图标最大的好处在于：它不会变形且加载速度快。字体图标可以像文字一样，随意通过CSS来控制它的大小和颜色，对于建网站来说，非常方便。

font-awesome图标的使用

图20.12　字体图标

（2）字体图标使用。

字体图标是font-awesome图标，其使用分为四步：

第一步：通过网站https://fontawesome.dashgame.com/下载Font Awesome最新版，并解压文件。

第二步：复制整个font-awesome文件夹到项目中。

第三步：在HTML的〈head〉中引用font-awesome.min.css：

〈link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"〉

第四步：选择图标复制类名：

〈i class="fa fa-camera-retro"〉〈/i〉

项目训练