CSS3 是 CSS 的修訂版本。CSS3 的開發(fā)是朝著模塊化發(fā)展的。

簡介

CSS3 被拆分為“模塊”。舊規(guī)范已拆分成小塊，還增加了新的。

一些重要的 CSS3 模塊如下：

• 選擇器
• 盒模型
• 背景和邊框
• 文字特效
• 2D/3D 變換
• 動(dòng)畫
• 多列布局
• 用戶界面

邊框

利用 CSS3，可以創(chuàng)建圓角邊框、添加陰影框，并作為邊界的形象而無需使用其他工具。

圓角

border-radius 屬性用于創(chuàng)建圓角。

以下示例為圓角邊框：

div {
    border: 2px solid;
    border-radius: 25px;
}

盒陰影

box-shadow 屬性用于添加陰影：

div {
    box-shadow: 10px 10px 5px #888888;
}

邊界圖片

border-image 屬性允許指定一個(gè)圖片作為邊框。

div {
    border-image: url(border.png) 30 30 round;
}

新的邊框?qū)傩?/h3>

屬性	說明
border-image	設(shè)置所有邊框圖像的簡寫屬性
border-radius	用于設(shè)置所有四個(gè)邊框半徑屬性的簡寫屬性
box-shadow	附加一個(gè)或多個(gè)下拉框的陰影

背景

CSS3 新增了幾個(gè)新的背景屬性，提供更多的控制。

background-image

CSS3 中可以通過 background-image 屬性添加背景圖片。

不同的背景圖像和圖像用逗號隔開，所有的圖片中顯示在最頂端的為第一張。

div {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
}

可以給不同的圖片設(shè)置多個(gè)不同的屬性。

div {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

background-size

background-size 指定背景圖像的大小。CSS3 以前，背景圖像大小由圖像的實(shí)際大小決定。

CSS3 中可以指定背景圖片，以重新在不同的環(huán)境中指定背景圖片的大小。可以指定像素或百分比大小。指定的大小是相對于父元素尺寸的百分比的大小。

div {
    background: url(img_flwr.gif);
    background-size: 80px 60px;
    background-repeat: no-repeat;
}

div {
    background: url(img_flwr.gif);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

background-origin

background-origin 屬性指定了背景圖像的位置區(qū)域。

content-box、padding-box 和 border-box 區(qū)域內(nèi)可以放置背景圖像。

盒子模型三層的背景圖像

div {
    background: url(img_flwr.gif);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: content-box;
}

多個(gè)背景圖像

CSS3 允許在元素中添加多個(gè)背景圖像。

body {
    background-image: url(img_flwr.gif), url(img_tree.gif);
}

background-clip

background-clip 背景剪裁屬性是從指定位置開始繪制。

div {
    border: 10px dotted black;
    padding: 35px;
    background: yellow;
    background-clip: content-box;
}

新的背景屬性

漸變

漸變可以在兩個(gè)或多個(gè)指定的顏色之間顯示平穩(wěn)的過渡。

CSS3 定義了兩種類型的漸變：

• 線性漸變：向下／向上／向左／向右／對角方向
• 徑向漸變：由它們的中心定義

線性漸變

為了創(chuàng)建一個(gè)線性漸變，必須至少定義兩種顏色結(jié)點(diǎn)。顏色結(jié)點(diǎn)即想要呈現(xiàn)平穩(wěn)過渡的顏色。同時(shí)，也可以設(shè)置一個(gè)起點(diǎn)和一個(gè)方向（或一個(gè)角度）。

線性漸變的例子

{
    background: linear-gradient(direction, color-stop1, color-stop2, …);
}

線性漸變－從上到下（默認(rèn)情況下）

下面的示例演示了從頂部開始的線性漸變。起點(diǎn)是紅色，慢慢過渡到藍(lán)色：

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

線性漸變－從左到右

下面的示例演示了從左邊開始的線性漸變。起點(diǎn)是紅色，慢慢過渡到藍(lán)色：

#grad {
    background: linear-gradient(to right, red, blue);
}

線性漸變－對角

可以通過指定水平和垂直的起始位置來制作一個(gè)對角漸變。

下面的示例演示了從左上角開始（到右下角）的線性漸變。起點(diǎn)是紅色，慢慢過渡到藍(lán)色：

#grad {
    background: linear-gradient(to bottom right, red, blue);
}

使用角度

如果想要在漸變的方向上做更多的控制，可以定義一個(gè)角度，而不用預(yù)定義方向（to bottom、to top、to right、to left、to bottom right 等等）。

{
    background: linear-gradient(angle, color-stop1, color-stop2);
}

角度是指水平線和漸變線之間的角度，以順時(shí)針方向旋轉(zhuǎn)。換句話說，0 deg 將創(chuàng)建一個(gè)從下到上的漸變，90 deg 將創(chuàng)建一個(gè)從左到右的漸變。

不同的線性漸變角度

下面的示例演示了如何在線性漸變上使用角度：

#grad {
    background: linear-gradient(180deg, red, blue);
}

使用多個(gè)顏色結(jié)點(diǎn)

下面的示例演示了如何設(shè)置多個(gè)顏色結(jié)點(diǎn)：

#grad {
    background: linear-gradient(red, green, blue);
}

下面的示例演示了如何創(chuàng)建一個(gè)帶有彩虹顏色和文本的線性漸變：

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

使用透明度

CSS3 漸變也支持透明度，可用于創(chuàng)建減弱變淡的效果。

為了添加透明度，使用 rgba() 函數(shù)來定義顏色結(jié)點(diǎn)。rgba() 函數(shù)中的最后一個(gè)參數(shù)可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明。

下面的示例演示了從左邊開始的線性漸變。起點(diǎn)是完全透明，慢慢過渡到完全不透明的紅色：

#grad {
    background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}

重復(fù)的線性漸變

repeating-linear-gradient() 函數(shù)用于重復(fù)線性漸變：

#grad {
    background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

徑向漸變

徑向漸變由它的中心定義。

為了創(chuàng)建一個(gè)徑向漸變，同樣必須至少定義兩種顏色結(jié)點(diǎn)。顏色結(jié)點(diǎn)即想要呈現(xiàn)平穩(wěn)過渡的顏色。

同時(shí)，也可以指定漸變的中心、形狀（圓形或橢圓形）、大小。默認(rèn)情況下，漸變的中心是 center（中心點(diǎn)），漸變的形狀是 ellipse（橢圓形），漸變的大小是 farthest-corner（到最遠(yuǎn)的角落）。

徑向漸變的例子

{
    background: radial-gradient(center, shape size, start-color, …, last-color);
}

徑向漸變－顏色結(jié)點(diǎn)均勻分布（默認(rèn)情況下）

#grad {
    background: radial-gradient(red, green, blue);
}

徑向漸變－顏色結(jié)點(diǎn)不均勻分布

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

設(shè)置形狀

shape 參數(shù)定義了形狀。它的值可以是 circle（圓形）或 ellipse（橢圓形）。默認(rèn)值是 ellipse。

#grad {
    background: radial-gradient(circle, red, yellow, green);
}

不同尺寸大小關(guān)鍵字的使用

size 參數(shù)定義了漸變的大小。它可以是以下四個(gè)值：

• closest-side
• farthest-side
• closest-corner
• farthest-corner

#grad1 {
    background: radial-gradient(60% 55%, closest-side, blue, green, yellow, black);
}

#grad2 {
    background: radial-gradient(60% 55%, farthest-corner, blue, green, yellow, black);
}

重復(fù)的徑向漸變

repeating-radial-gradient() 函數(shù)用于重復(fù)徑向漸變：

#grad {
    background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

文本效果

CSS3 中包含幾個(gè)新的文本特征。

文本陰影

text-shadow 屬性適用于文本陰影。

可以指定水平陰影、垂直陰影、模糊的距離，以及陰影的顏色：

h1 {
    text-shadow: 5px 5px 5px #FF0000;
}

盒子陰影

box-shadow 屬性適用于盒子陰影。

div {
    box-shadow: 10px 10px;
}

接下來給陰影添加顏色：

div {
    box-shadow: 10px 10px grey;
}

接下來給陰影添加一個(gè)模糊效果：

div {
    box-shadow: 10px 10px 5px grey;
}

也可以在 ::before 和 ::after 兩個(gè)偽元素中添加陰影效果：

#boxshadow {
    position: relative;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
    padding: 10px;
    background: white;
}

#boxshadow img {
    width: 100%;
    border: 1px solid #8a4419;
    border-style: inset;
}

#boxshadow::after {
    content: "";
    position: absolute;
    z-index: -1;
    /* 隱藏圖像背后的陰影 */
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    width: 70%;
    left: 15%;
    /* 其余 30% 的一半 */
    height: 100px;
    bottom: 0;
}

陰影的一個(gè)使用特例是卡片效果：

div.card {
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
}

文本溢出

text-overflow 屬性指定應(yīng)向用戶如何顯示溢出內(nèi)容。

div.test {
    white-space: nowrap;
    width: 12em;
    overflow: hidden;
    border: 1px solid #000000;
}

換行

如果某個(gè)單詞太長，不適合在一個(gè)區(qū)域內(nèi)，它擴(kuò)展到外面。

CSS3 中，自動(dòng)換行屬性允許強(qiáng)制文本換行，即使這意味著分裂它中間的一個(gè)字：

p {
    word-wrap: break-word;
}

單詞拆分換行

CSS3 單詞拆分換行屬性指定換行規(guī)則：

p.test1 {
    word-break: keep-all;
}

p.test2 {
    word-break: break-all;
}

新的文本屬性

字體

@font-face 規(guī)則

在 CSS3 之前，Web 設(shè)計(jì)師必須使用已在用戶計(jì)算機(jī)上安裝好的字體，不能夠使用離線字體。不過通過 CSS3，Web 設(shè)計(jì)師可以使用他們喜歡的任意字體。

當(dāng)找到或購買到希望使用的字體時(shí)，可將該字體文件存放到 Web 服務(wù)器上，它會(huì)在需要時(shí)自動(dòng)下載到用戶的計(jì)算機(jī)上。

“自己的”的字體是在 CSS3 @font-face 規(guī)則中定義的。

使用需要的字體

在新的 @font-face 規(guī)則中，必須首先定義字體的名稱（比如 myFirstFont），然后指向該字體文件。

如果需要為 HTML 元素使用字體，要通過 font-family 屬性來引用字體的名稱：

@font-face {
    font-family: myFirstFont;
    src: url(Sansation_Light.ttf);
}

div {
    font-family: myFirstFont;
}

使用粗體文本

必須添加另一個(gè)包含粗體文字的 @font-face 規(guī)則：

@font-face {
    font-family: myFirstFont;
    src: url(sansation_bold.woff);
    font-weight: bold;
}

該文件 Sansation_Bold.ttf 是另一種字體文件，包含 Sansation 字體的粗體字。

瀏覽器使用這一文本的字體系列 myFirstFont 時(shí)應(yīng)該呈現(xiàn)為粗體。

這樣就可以有許多相同字體的 @font-face 規(guī)則。

字體描述

2D 變換

利用 CSS3 變換，可以移動(dòng)、比例化、反轉(zhuǎn)、旋轉(zhuǎn)和拉伸元素。

div {
    transform: rotate(30deg);
}

translate

translate() 方法，根據(jù)左（ 軸）和頂部（ 軸）位置給定的參數(shù)，從當(dāng)前元素位置移動(dòng)。

div {
    transform: translate(50px, 100px);
}

translate(50px, 100px) 是指元素從左邊移動(dòng) 50 個(gè)像素，并從頂部移動(dòng) 100 像素。

rotate

rotate() 方法使元素在一個(gè)給定度數(shù)順時(shí)針旋轉(zhuǎn)。允許負(fù)值，這樣就是逆時(shí)針旋轉(zhuǎn)。

div {
    transform: rotate(30deg);
}

scale

scale() 方法使元素縮放，大小取決于寬度（ 軸）和高度（ 軸）的參數(shù)：

div {
    transform: scale(2, 4);
}

skew

包含兩個(gè)參數(shù)值，分別表示 軸和 軸傾斜的角度。如果第二個(gè)參數(shù)為空，則默認(rèn)為 0。參數(shù)為負(fù)表示向相反方向傾斜。

• skewX() 表示只在 軸（水平方向）傾斜；
• skewY() 表示只在 軸（垂直方向）傾斜。

div {
    transform: skew(30deg, 20deg);
}

matrix

matrix() 方法將所有 2D 變換方法合并成一個(gè)。

matrix() 方法有六個(gè)參數(shù)，包含旋轉(zhuǎn)、縮放、移動(dòng)（平移）和傾斜。

div {
    transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);
}

新變換屬性

2D 變換方法

函數(shù)	描述
matrix(n, n, n, n, n, n)	2D 變換，使用六個(gè)值的矩陣
translate(x, y)	2D 變換，沿著 和 軸移動(dòng)元素
translateX(n)	2D 變換，沿著 軸移動(dòng)元素
translateY(n)	2D 變換，沿著 軸移動(dòng)元素
scale(x, y)	2D 縮放變換，改變元素的尺寸
scaleX(n)	2D 縮放變換，改變元素的寬度
scaleY(n)	2D 縮放變換，改變元素的高度
rotate(angle)	2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度
skew(x-angle, y-angle)	2D 傾斜變換，沿著 和 軸
skewX(angle)	2D 傾斜變換，沿著 軸
skewY(angle)	2D 傾斜變換，沿著 軸

3D 變換

CSS3 允許使用 3D 變換來對元素進(jìn)行格式化。

rotateX

rotateX() 方法使元素圍繞 軸在一個(gè)給定的度數(shù)旋轉(zhuǎn)。

div {
    transform: rotateX(150deg);
}

rotateY

rotateX() 方法使元素圍繞 軸在一個(gè)給定的度數(shù)旋轉(zhuǎn)。

div {
    transform: rotateY(150deg);
}

CSS 變換屬性

3D 變換方法

函數(shù)	描述
matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n)	3D 變換，使用 16 個(gè)值的 4×4 矩陣
translate3d(x, y, z)	3D 變換
translateX(x)	3D 變換，僅使用用于 軸的值
translateY(y)	3D 變換，僅使用用于 軸的值
translateZ(z)	3D 變換，僅使用用于 軸的值
scale3d(x, y, z)	定義 3D 縮放變換
scaleX(x)	3D 縮放變換，給定一個(gè) 軸的值
scaleY(y)	3D 縮放變換，給定一個(gè) 軸的值
scaleZ(z)	3D 縮放變換，給定一個(gè) 軸的值
rotate3d(x, y, z, angle)	3D 旋轉(zhuǎn)
rotateX(angle)	沿 軸的 3D 旋轉(zhuǎn)
rotateY(angle)	沿 軸的 3D 旋轉(zhuǎn)
rotateZ(angle)	沿 軸的 3D 旋轉(zhuǎn)
perspective(n)	3D 變換元素的透視視圖

過渡

CSS 過渡允許在給定的持續(xù)時(shí)間內(nèi)平滑地（從一個(gè)值到另一個(gè)值）更改屬性值。

CSS3 過渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。

要實(shí)現(xiàn)這一點(diǎn)，必須規(guī)定兩項(xiàng)內(nèi)容：

• 指定要添加效果的 CSS 屬性
• 指定效果的持續(xù)時(shí)間

div {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s;
}

如果未指定持續(xù)時(shí)間，將沒有過渡效果，因?yàn)槟J(rèn)值是 0。

指定的 CSS 屬性的值更改時(shí)效果會(huì)發(fā)生變化。一個(gè)典型 CSS 屬性的變化是用戶鼠標(biāo)放在一個(gè)元素上時(shí)：

div:hover {
    width: 300px;
}

當(dāng)鼠標(biāo)光標(biāo)移動(dòng)到該元素時(shí)，它將逐漸改變樣式。

多項(xiàng)改變

要添加多個(gè)樣式的變換效果，添加的屬性由逗號分隔：

div {
    transition: width 2s, height 2s, transform 2s;
}

CSS 過渡屬性

動(dòng)畫

CSS 動(dòng)畫允許大多數(shù) HTML 元素的動(dòng)畫，而無需使用 JavaScript 和 Flash。

@keyframes 規(guī)則

要使用 CSS 動(dòng)畫，必須首先為動(dòng)畫指定一些關(guān)鍵幀。關(guān)鍵幀保持元素在特定時(shí)間具有的樣式。

@keyframes 規(guī)則內(nèi)指定一個(gè) CSS 樣式和動(dòng)畫將逐步從目前的樣式更改為新的樣式。

@keyframes myfirst {
    from {
        background: red;
    }

    to {
        background: yellow;
    }
}

創(chuàng)建動(dòng)畫

當(dāng)在 @keyframe 創(chuàng)建動(dòng)畫時(shí)，需要把它綁定到選擇器，否則動(dòng)畫不會(huì)有任何效果。

指定至少這兩個(gè) CSS3 的動(dòng)畫屬性綁定向一個(gè)選擇器：

• 規(guī)定動(dòng)畫的名稱
• 規(guī)定動(dòng)畫的時(shí)長

div {
    animation: myfirst 5s;
}

動(dòng)畫是什么

CSS 動(dòng)畫是使元素從一種樣式逐漸變化為另一種樣式的效果。

可以改變?nèi)我舛嗟臉邮健⑷我舛嗟拇螖?shù)。

用百分比來規(guī)定變化發(fā)生的時(shí)間，或用關(guān)鍵詞 from 和 to，等同于 0% 和 100%。0% 是動(dòng)畫的開始，100% 是動(dòng)畫的完成。為了得到最佳的瀏覽器支持，應(yīng)當(dāng)始終定義 0% 和 100% 選擇器。

@keyframes myfirst {
    0% {
        background: red;
        left: 0px;
        top: 0px;
    }

    25% {
        background: yellow;
        left: 200px;
        top: 0px;
    }

    50% {
        background: blue;
        left: 200px;
        top: 200px;
    }

    75% {
        background: green;
        left: 0px;
        top: 200px;
    }

    100% {
        background: red;
        left: 0px;
        top: 0px;
    }
}

CSS 動(dòng)畫屬性

多列

通過 CSS3，能夠創(chuàng)建多個(gè)列來對文本進(jìn)行布局，就像報(bào)紙那樣。

創(chuàng)建多列

column-count 屬性指定元素應(yīng)分成的列數(shù)。

div {
    column-count: 3;
}

指定列間距

column-gap 屬性指定列之間的距離。

div {
    column-gap: 40px;
}

列規(guī)則

column-rule 屬性指定列之間的寬度、樣式和顏色。

div {
    column-rule: 1px solid lightblue;
}

CSS 多列屬性

用戶界面

在 CSS3 中，增加了一些新的用戶界面特性來調(diào)整元素尺寸、框尺寸和外邊框。

調(diào)整尺寸

resize 屬性指定一個(gè)元素是否應(yīng)該由用戶去調(diào)整大小。

div {
    resize: horizontal;
    overflow: auto;
}

Edge 從 EdgeHTML 15（Windows 10 版本 1703）開始提供支持。

輪廓偏移

outline-offset 屬性對輪廓進(jìn)行偏移，并在超出邊框邊緣的位置繪制輪廓。

輪廓與邊框有兩點(diǎn)不同：

• 輪廓不占用空間
• 輪廓可能是非矩形

div {
    border: 2px solid black;
    outline: 2px solid red;
    outline-offset: 15px;
}

Edge 從 EdgeHTML 15（Windows 10 版本 1703）開始提供支持。

框大小

box-sizing 屬性允許在元素的總寬度和高度中包含填充和邊框。

不使用 box-sizing 屬性

默認(rèn)情況下，元素的寬度與高度的計(jì)算方式如下：

• 寬度＋內(nèi)邊距＋邊框＝元素實(shí)際寬度
• 高度＋內(nèi)邊距＋邊框＝元素實(shí)際高度

這就意味著在設(shè)置元素的寬度和高度時(shí)，元素真實(shí)展示的高度與寬度會(huì)更大，因?yàn)檫吙蚺c內(nèi)邊距也會(huì)計(jì)算在內(nèi)。

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue; 
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
}

以上兩個(gè) <div> 元素雖然寬度與高度設(shè)置一樣，但真實(shí)展示的大小不一致，因?yàn)?div2 指定了內(nèi)邊距。

使用這種方式，如果想要獲得較小的那個(gè)框且包含內(nèi)邊距，就不得不考慮到邊框和內(nèi)邊距的寬度。

CSS3 的 box-sizing 屬性很好地解決了這個(gè)問題。

使用 box-sizing 屬性

如果在元素上設(shè)置了 box-sizing: border-box;，則內(nèi)邊距和邊框也包含在寬度和高度中：

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}

.div2 {
    width: 300px;
    height: 100px;
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}

從結(jié)果上看，這種效果更好，正是需要的。

將這種效果應(yīng)用于所有元素既安全，又明智：

* {
    box-sizing: border-box;
}

彈性盒

CSS3 彈性盒（Flexible Box 或 flexbox），是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?/p>

引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個(gè)容器中的子元素進(jìn)行排列、對齊和分配空白空間。

彈性盒內(nèi)容

彈性盒由彈性容器（Flex container）和彈性項(xiàng)（Flex item）組成。

彈性容器通過設(shè)置 display 屬性的值為 flex 或 inline-flex 將其定義為彈性容器。

彈性容器內(nèi)包含了一個(gè)或多個(gè)彈性項(xiàng)。

彈性項(xiàng)通常在彈性盒內(nèi)一行顯示。默認(rèn)情況每個(gè)容器只有一行。

以下元素展示了彈性項(xiàng)在一行內(nèi)顯示，從左到右：

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

當(dāng)然，可以修改排列方式。

如果設(shè)置 direction 屬性為 rtl（right-to-left），彈性項(xiàng)的排列方式會(huì)改變，頁面布局也跟著改變：

body {
    direction: rtl;
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}

flex-direction

flex-direction 順序指定了彈性項(xiàng)在父容器中的位置。

語法如下：

{
    flex-direction: row | row-reverse | column | column-reverse
}

• row：橫向從左到右排列（左對齊），默認(rèn)的排列方式；
• row-reverse：反轉(zhuǎn)橫向排列（右對齊），從后往前排，最后一項(xiàng)排在最前面；
• column：縱向排列；
• column-reverse：反轉(zhuǎn)縱向排列，從后往前排，最后一項(xiàng)排在最上面。

justify-content

內(nèi)容對齊（justify-content）屬性應(yīng)用在彈性容器上，把彈性項(xiàng)沿著彈性容器的主軸線（main axis）對齊。

語法如下：

{
    justify-content: flex-start | flex-end | center | space-between | space-around
}

• flex-start：彈性項(xiàng)目向行頭緊挨著填充。默認(rèn)值。第一個(gè)彈性項(xiàng)的 main-start 外邊距邊線被放置在該行的 main-start 邊線，而后續(xù)彈性項(xiàng)依次平齊擺放；
• flex-end：彈性項(xiàng)目向行尾緊挨著填充。第一個(gè)彈性項(xiàng)的 main-end 外邊距邊線被放置在該行的 main-end 邊線，而后續(xù)彈性項(xiàng)依次平齊擺放；
• center：彈性項(xiàng)目居中緊挨著填充。如果剩余的自由空間是負(fù)的，則彈性項(xiàng)目將在兩個(gè)方向上同時(shí)溢出；
• space-between：彈性項(xiàng)目平均分布在該行上。如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng)，則該值等同于 flex-start。否則，第 1 個(gè)彈性項(xiàng)的外邊距和行的 main-start 邊線對齊，而最后 1 個(gè)彈性項(xiàng)的外邊距和行的 main-end 邊線對齊，然后剩余的彈性項(xiàng)分布在該行上，相鄰項(xiàng)目的間隔相等；
• space-around：彈性項(xiàng)目平均分布在該行上，兩邊留有一半的間隔空間。如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng)，則該值等同于 center。否則，彈性項(xiàng)目沿該行分布，且彼此間隔相等（比如是 20 px），同時(shí)首尾兩邊和彈性容器之間留有一半的間隔（? × 20 px = 10 px）。

效果圖

align-items

align-items 設(shè)置或檢索彈性項(xiàng)在側(cè)軸（縱軸）方向上的對齊方式。

語法如下：

{
    align-items: flex-start | flex-end | center | baseline | stretch
}

• flex-start：彈性項(xiàng)的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界；
• flex-end：彈性項(xiàng)的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界；
• center：彈性項(xiàng)在該行的側(cè)軸（縱軸）上居中放置。如果該行的尺寸小于彈性項(xiàng)的尺寸，則會(huì)向兩個(gè)方向溢出相同的長度；
• baseline：如彈性項(xiàng)的行內(nèi)軸與側(cè)軸為同一條，則該值與 flex-start 等效。其它情況下，該值將參與基線對齊；
• stretch：如果指定側(cè)軸大小的屬性值為 auto，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時(shí)會(huì)遵照 min/max-width/height 屬性的限制。默認(rèn)值。

flex-wrap

flex-wrap 屬性用于指定彈性項(xiàng)的換行方式。

語法如下：

{
    flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;
}

• nowrap：默認(rèn)，彈性容器為單行。該情況下彈性項(xiàng)可能會(huì)溢出容器；
• wrap：彈性容器為多行。該情況下彈性子項(xiàng)溢出的部分會(huì)被放置到新行，子項(xiàng)內(nèi)部會(huì)發(fā)生斷行；
• wrap-reverse：反轉(zhuǎn)換行排列。

align-content

align-content 屬性用于修改 flex-wrap 屬性的行為。類似于 align-items，但它不是設(shè)置彈性項(xiàng)的對齊，而是設(shè)置各個(gè)行的對齊。

語法如下：

{
    align-content: flex-start | flex-end | center | space-between | space-around | stretch
}

• stretch：默認(rèn)。各行將會(huì)伸展以占用剩余的空間；
• flex-start：各行向彈性盒容器的起始位置堆疊；
• flex-end：各行向彈性盒容器的結(jié)束位置堆疊；
• center：各行向彈性盒容器的中間位置堆疊；
• space-between：各行在彈性盒容器中平均分布；
• space-around：各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。

彈性項(xiàng)屬性

排序

order 屬性設(shè)置彈性容器內(nèi)彈性項(xiàng)的屬性，用整數(shù)值來定義排列順序，數(shù)值小的排在前面?？梢詾樨?fù)值。

.first {
    order: -1;
}

對齊

設(shè)置 margin 值為 auto 值，自動(dòng)獲取彈性容器中剩余的空間。所以設(shè)置垂直方向 margin 值為 auto，可以使彈性項(xiàng)在彈性容器的兩上軸方向都完全集中。

.flex-item:first-child {
    margin-right: auto;
}

完美的居中

使用彈性盒，居中變得很簡單，只要設(shè)置 margin: auto;，就可以使得彈性項(xiàng)在兩上軸方向上完全居中：

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}

align-self

align-self 屬性用于設(shè)置彈性項(xiàng)自身在側(cè)軸（縱軸）方向上的對齊方式。

語法如下：

{
    align-self: auto | flex-start | flex-end | center | baseline | stretch
}

• auto：如果 align-self 的值為 auto，則計(jì)算值為父元素的 align-items 值。如果沒有父元素，則計(jì)算值為 stretch；
• flex-start：彈性項(xiàng)的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界；
• flex-end：彈性項(xiàng)的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界；
• center：彈性項(xiàng)在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性項(xiàng)的尺寸，則會(huì)向兩個(gè)方向溢出相同的長度）；
• baseline：如彈性項(xiàng)的行內(nèi)軸與側(cè)軸為同一條，則該值與 flex-start 等效。其它情況下，該值將參與基線對齊；
• stretch：如果指定側(cè)軸大小的屬性值為 auto，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時(shí)會(huì)遵照 min/max-width/height 屬性的限制。

flex

flex 屬性用于指定彈性項(xiàng)如何分配空間。

語法如下：

{
    flex：none | [flex-grow] | [flex-shrink] | [flex-basis]
}

• none：none 關(guān)鍵字的計(jì)算值為 0 0 auto；
• [flex-grow]：彈性項(xiàng)的擴(kuò)展比率；
• [flex-shrink]：彈性項(xiàng)的收縮比率；
• [flex-basis]：彈性項(xiàng)的默認(rèn)基準(zhǔn)值。

CSS 彈性盒屬性