【15】CSS3（Web字体、多列布局、弹性布局（flex 伸缩盒布局））

1 Web字体

1.1 web 字体基本语法

/*引入web字体*/
@font-face {    
    font-family:"字体的名字";
    src:url(字体地址1) format(字体格式1),
        url(字体地址1) format(字体格式1),
        url(字体地址1) format(字体格式1);
}
/*使用*/
.box {
    font-family:"字体的名字";
}

字体放在服务器上，用户需下载
不同浏览器支持不同格式的字体，为了保证兼容性，一种字体需要设置多种格式，因此web字体基本语法中有多个url。
字体格式转换工具：
- https://www.fontsquirrel.com/tools/webfont-generator FontSquirrel在线工具
- https://www.fontke.com/tool/fontface/ 字客网
优点：图片放大不清晰，字体放大仍然清晰。
缺点：字体文件太大，下载需要时间，因此不用做大篇幅的字体，常用作定制字体。

1.2 定制字体

实际中，一般会针对具体几个文字，单独定制几个字体。

字体定制工具：

https://www.iconfont.cn/webfont?spm=a313x.7781068.0.d81ec59f2#!/webfont/index 阿里Web字体
http://www.youziku.com/ 字体库网站
https://www.ziti163.com/webfont/create.aspx 字体网

1.3 字体图标

字体图标比位图更清晰，易于改变大小、颜色、风格等，兼容性好。

字体图标库：

阿里图标：http://www.iconfont.cn/
font-awesome：http://fontawesome.dashgame.com/

字体图标制作工具 icoMoon： http://icomoon.io/app/#/select

2 多列布局

2.1 设置给包裹元素的 CSS 属性（共 8 个属性）

CSS 属性名	含义	值	备注
column-count	指定列数	数字	推荐使用
column-width	指定列宽	长度
columns	column-count和column-width的复合属性，同时指定列数和列宽	列数和列宽	若同时指定，则算出来列数少的生效
column-gap	指定列间距	长度
column-rule-style	列边框的风格	同 border-style
column-rule-width	列边框的宽度	长度
column-rule-color	列边框的颜色	颜色
column-rule	列边框的复合属性，同时设置风格、宽度、颜色	风格、宽度、颜色

2.2 设置给子元素的 CSS 属性（共 4 个属性）

CSS 属性名	含义	值
-webkit-column-break-before	设置元素前面的断列方式	auto：自动，默认值 avoid：总是不断列 always：总是断列
-webkit-column-break-after	设置元素后面的断列方式	auto：自动，默认值 avoid：总是不断列 always：总是断列
-webkit-column-break-inside	设置元素内部的断列方式	auto：自动，默认值 avoid：总是不断列
column-fill	列高统一

3 弹性布局（flex 伸缩盒布局）

3.1 伸缩容器和伸缩项目

① 伸缩容器：

设置了 CSS 属性 display:flex （独占一行）或者 display:inline-flex（不独占一行，可设宽高）的元素。

② 伸缩项目：

伸缩容器的子元素。

特点：

1、伸缩项目会在伸缩容器中默认水平排列。

2、伸缩项目可以设置宽高、内外边距，且不存在外边距塌陷，不会脱离文档流，具有伸缩性。

3、一个元素可以同时是伸缩项目和伸缩容器。

3.2 设置主轴方向和换行方式

主轴：伸缩项目沿主轴排列，默认方向为水平从左到右。

侧轴： 与主轴垂直的轴叫侧轴，侧轴方向随主轴方向变化。

① 设置主轴方向

给伸缩容器设置 CSS 属性 flex-direction ，值：

row             水平从左到右，默认值
row-reverse      水平从右到左
column           垂直从上到下
column-reverse    垂直从下到上

② 设置换行方式

给伸缩容器设置 CSS 属性 flex-wrap 可以设置伸缩项目在主轴方向上的换行方式，值：

nowrap          不换行，默认值
wrap            换行
wrap-reverse     自动换行，行翻转

③ 同时设置主轴方向和换行方式

flex-flow：flex-direction和flex-wrap的复合属性，设置给伸缩容器即可同时设置主轴方向和换行方式，值无数量和顺序要求。

3.3 设置伸缩项目在主轴上的对齐方式

给伸缩容器设置 justify-content 属性，值：

flex-start      靠主轴开始方向对齐
flex-end        靠主轴结束方向对齐
center          居中
space-between    两端对齐，两端没有空隙，中间有空隙
space-around     两端空隙是中间空隙的一半
space-evenly     两端空隙与中间空隙相等

3.4 设置伸缩项目在主轴上的对齐方式

① 一条主轴线（伸缩项目在主轴上不换行）

给伸缩容器设置 align-items 属性，值：

stretch         伸缩项目在侧轴方向的长度在侧轴方向拉伸，默认值（不设置伸缩项目在侧轴方向的长度，才会生效）
flex-start      侧轴起点对齐
flex-end        侧轴终点对齐
center          居中对齐
baseline        文本基线对齐

② 多条主轴线（伸缩项目在主轴上发生换行）

给伸缩容器设置 align-content 属性，值：

stretch         伸缩项目在侧轴方向的长度在侧轴方向拉伸，默认值（不设置伸缩项目在侧轴方向的长度，才会生效）
flex-start      侧轴起点对齐
flex-end        侧轴终点对齐
center          居中对齐
space-between    两端对齐，两端没有空隙，中间有空隙
space-around     两端空隙是中间空隙的一半
space-evenly     两端空隙与中间空隙相等

注：

align-content 实际上设置的是多条主轴之间如何对齐。
align-items 属性不论一条主轴线还是多条主轴线都会起作用；align-content 只在多条主轴线的情况下起作用。

3.5 伸缩项目的伸缩性

① 伸缩项目在主轴上的基准长度 flex-basis

给伸缩项目设置CSS属性flex-basis，可以设置伸缩项目在主轴上的基准长度，值为长度。如果设置了flex-basis，则伸缩项目在主轴上的长度按照基准长度，不按设置的宽高显示；如果不设置 flex-basis，伸缩项目在主轴上的长度取决于所设置的 width 或者 height。

② 扩展比率 flex-grow

给伸缩项目设置CSS属性flex-grow 可定义伸缩项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

扩展前提：伸缩容器在主轴方向向上有富余的长度。
扩展时考虑因素：伸缩项目的扩展比率

③ 收缩比率 flex-shrink

给伸缩项目设置CSS属性flex-shrink 可定义伸缩项目的收缩比例，默认为1，即按收缩项目在主轴上的长度比例收缩。

收缩前提：伸缩容器在主轴方向上长度不足。
收缩时考虑因素：伸缩项目的收缩比率、收缩项目原来在主轴上的长度。

④ 复合属性 flex

给伸缩项目设置CSS属性flex可同时设置扩展比率、收缩比率、主轴基准长度。

flex: grow shrink basis;/*顺序固定：扩展比率 收缩比率 基准长度*/
flex: 0 1 auto;   /* 扩展比率是0，收缩比率是1，基准长度是auto */

flex: 1;      /* flex: 1 1 0; */
/*basis设为0，伸缩项目主轴上的长度为0，伸缩容器整个富余，需均分至各伸缩项目，扩展比率为1，伸缩项目可以扩展，因此该设置可显示伸缩项目沿主轴平均铺满伸缩容器的效果。*/
flex: auto;   /* flex: 1 1 auto; */
flex: none;   /* flex: 0 0 auto;不伸不缩 */
flex: 0 auto; /* flex: 0 1 auto;只缩不伸，默认值 */

3.6 伸缩项目排序

给伸缩项目设置CSS属性order可以设置伸缩项目的排序，值为数字，数字越小排序越靠前，可以是负值。默认值是 0。

3.7 单独设置某个伸缩项目在侧轴上的对齐方式

给某个伸缩项目设置属性 align-self 可以单独设置该伸缩项目在侧轴上的对齐方式，值与 align-items 一致，但多一个默认值auto，即继承其父元素的align-items属性。

3.8 伸缩盒相关 CSS 属性总结

① 设置给伸缩容器的属性

CSS 属性名	含义	值
display	设置伸缩容器	flex：块级伸缩容器 inline-flex：行内伸缩容器
flex-direction	设置主轴方向	row：水平从左到右，默认值 row-reverse：水平从右到左 column：垂直从上到下 column-reverse：垂直从下到上
flex-wrap	设置换行方式	nowrap：不换行，默认值 wrap：自动换行 wrap-reverse：自动换行且行翻转
flex-flow	同时设置主轴方向和换行方式	flex-dierection 和 flex-wrap 的值
justify-content	设置伸缩项目在主轴上的对齐方式	flex-start：主轴起点对齐 flex-end：主轴结束对齐 center：居中对齐 space-between：两端无空隙，中间有空隙 space-around：两端空隙是中间空隙的一半 space-evenly：两端空隙与中间空隙一致
align-items	设置伸缩项目在侧轴上的对齐方式（适用于一条主轴线）	stretch：在侧轴上拉伸，默认值。 flex-start：侧轴起点对齐 flex-end：侧轴结束对齐 center：居中对齐 baseline：基线对齐
align-content	设置伸缩项目在侧轴上的对齐方式（适用于多条主轴线）	stretch：在侧轴上拉伸，默认值。 flex-start：侧轴起点对齐 flex-end：侧轴结束对齐 center：居中对齐 space-between：两端无空隙，中间有空隙 space-around：两端空隙是中间空隙的一半 space-evenly：两端空隙与中间空隙一致

② 设置给伸缩项目的属性

CSS 属性名	含义	值
flex-basis	在主轴上的基准长度	指定长度，默认值是 auto
flex-grow	扩展比率	数字，默认值是0
flex-shrink	收缩比率	数字，默认值是1
flex	复合属性，同时设置 grow shrink basis	grow shrink basis的值
order	伸缩项目的排序	数字，默认值是 0
align-self	单独设置某个伸缩项目在侧轴上的对齐方式	auto：按伸缩容器的对齐方式设置，默认值 stretch：在侧轴上拉伸 flex-start：侧轴起点对齐 flex-end：侧轴结束对齐 center：居中对齐 baseline：基线对齐