1. 突变

线性突变

由上到下，从红色开始，突变到黄色：

#grad {  background-image: linear-gradient(red, yellow);}

由左到右，彩虹色：

#grad {  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); }

径向突变

由核心开始向外突变：

#grad {  background-image: radial-gradient(red 5%, yellow 15%, green 60%);}

2. 文本

空白解决

white-space 属性指定元素外部空白的解决形式. 此处禁用元素内的文本换行：

p {  white-space: nowrap;}

文本溢出

text-overflow 属性规定应如何向用户出现未显示的溢出内容：

hidden：裁剪掉.
ellipsis：显示....

p.test2 {  white-space: nowrap;   width: 200px;   border: 1px solid #000000;  overflow: hidden;  text-overflow: ellipsis; }

单词换行

word-wrap 属性使长文字可能被折断并换到下一行.

p.test {  width: 11em;   border: 1px solid #000000;  word-wrap: break-word;}

书写模式

writing-mode 属性规定文本行是程度搁置（horizontal-tb）还是垂直搁置（vertical-rl）.

span.test2 {  writing-mode: vertical-rl; }

3. 多列

div {  column-count: 3;            /* 创立3列 */  column-gap: 40px;            /* 列间距离 */  column-rule-style: solid;    /* 列间实线分隔 */  column-rule-width: 1px;    /* 分隔线宽度 */  column-rule-color: lightblue;    /* 分隔线色彩 */}

也可简写为：

div {  column-count: 3;  column-gap: 40px;  column-rule: 1px solid lightblue;}

4. 调整大小

resize 属性指定元素是否能够以及如何被用户调整大小：

horizontal：只能程度调整；
vertical：只能垂直调整；
both：可程度、垂直调整；
none：不能调整.

div {  resize: vertical;  overflow: auto;}

5. 弹性布局

将元素的 display 属性设置为 flex. 弹性容器的间接子元素会主动成为弹性我的项目.

.flex-container {  display: flex;  background-color: DodgerBlue;}

重叠方向

flex-direction 属性定义容器要在哪个方向上重叠 flex 我的项目：

row：按行（程度）；
column：按列（垂直）；
row-reverse：按行，然而反向重叠；
column-reverse：按列，然而反向重叠；

.flex-container {  display: flex;  flex-direction: row;}

是否换行

flex-wrap 属性规定是否应该对 flex 我的项目换行：

wrap：换行；
nowrap：不换行；

.flex-container {  display: flex;  flex-wrap: nowrap;}

程度对齐

justify-content 属性用于对齐 flex 我的项目：

flex-start：与容器的结尾对齐；
flex-end：与容器的末端对齐；
center：居中对齐；
space-around：显示我的项目之间、之前、之后的空格；
space-between：显示我的项目之间的空格；

.flex-container {  display: flex;  justify-content: space-around;  background-color: DodgerBlue;}

垂直对齐

align-items 属性用于垂直对齐 flex 我的项目：

flex-start：与容器的顶部对齐；
flex-end：与容器的底部对齐；
center：居中对齐；
stretch：拉伸 flex 我的项目以填充容器（默认）；
baseline：使各 flex 我的项目按基线对齐；

.flex-container {  display: flex;  height: 200px;  align-items: flex-start;  background-color: DodgerBlue;}

弹性我的项目属性

order 属性规定 flex 我的项目的程序:

<div class="flex-container">    <div style="order: 3">1</div>    <div style="order: 1">2</div>    <div style="order: 2">3</div> </div>

flex-grow 属性规定某个 flex 我的项目绝对于其余 flex 我的项目将增长多少:

<div class="flex-container">  <div style="flex-grow: 1">1</div>  <div style="flex-grow: 2">2</div></div>

flex-shrink 属性规定某个 flex 我的项目绝对于其余 flex 我的项目将膨胀多少:

<div class="flex-container">    <div>1</div>    <div>2</div>    <div style="flex-shrink: 2">3</div>    <div>4</div>    <div>5</div>    <div>6</div>    <div>7</div>    <div style="flex-shrink: 2">8</div>    <div>9</div>    <div>10</div></div>

flex-basis 属性规定 flex 我的项目的初始长度:

<div class="flex-container">  <div>1</div>  <div style="flex-basis:200px">2</div></div>

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

<div class="flex-container">    <div>1</div>    <div style="flex: 0 0 200px">2</div></div>

align-self 属性规定弹性容器内所选项目标对齐形式，它将笼罩容器的 align-items 属性所设置的默认对齐形式:

<div class="flex-container">    <div style="align-self: center">1</div>    <div style="align-self: flex-start">2</div>    <div style="align-self: flex-end">3</div>    <div>4</div></div>