如何利用CSS3進(jìn)行彈性布局時(shí)內(nèi)容對(duì)齊

本篇文章給大家分享的是有關(guān)如何利用CSS3進(jìn)行彈性布局時(shí)內(nèi)容對(duì)齊，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

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

該操作發(fā)生在彈性長(zhǎng)度以及自動(dòng)邊距被確定后。 它用來在存在剩余空間時(shí)如何加以分配，也會(huì)在發(fā)生內(nèi)容溢出時(shí)影響項(xiàng)目的對(duì)齊。

注意：彈性布局中有兩個(gè)基本術(shù)語main axis和cross axis，一般情況下，我們可以把它們各自看作是屏幕上的行向和列向（但是嚴(yán)格講，這和寫模式以及彈性流方向有關(guān)）。

那么main-start和main-end就可以分別被看作是彈性容器的左右邊。

justify-content語法如下：

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

參數(shù)說明如下：

flex-start

彈性項(xiàng)目向行頭緊挨著填充。這個(gè)是默認(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邊線對(duì)齊，而最后1個(gè)彈性項(xiàng)的外邊距和行的main-end邊線對(duì)齊，然后剩余的彈性項(xiàng)分布在該行上，相鄰項(xiàng)目的間隔相等。

space-around

彈性項(xiàng)目平均分布在該行上，兩邊留有一半的間隔空間。如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng)，則該值等同于center。否則，彈性項(xiàng)目沿該行分布，且彼此間隔相等（比如是20px），同時(shí)首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。

justify-content屬性取值效果示例

上圖很直觀的演示了以上5個(gè)取值的效果和差異。

以上就是如何利用CSS3進(jìn)行彈性布局時(shí)內(nèi)容對(duì)齊，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。