這篇文章給大家介紹CSS flex布局是怎樣的，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)建站長期為上千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為船營企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計，船營網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

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

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

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

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

justify-content語法如下： justify-content: flex-start | flex-end | center | space-between | space-around

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

關(guān)于CSS flex布局是怎樣的就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

分享文章：CSSflex布局是怎樣的
轉(zhuǎn)載注明：http://www.rwnh.cn/article44/cjoihe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、軟件開發(fā)、品牌網(wǎng)站建設(shè)、網(wǎng)站營銷、微信小程序、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)