css3 flex實現(xiàn)div內(nèi)容水平垂直居中的幾種方法

發(fā)布時間：2020-03-27 16:04:58 作者：kinvip

這篇文章主要介紹了css3 flex實現(xiàn)div內(nèi)容水平垂直居中的幾種方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、flex-direction: （元素排列方向）

※ flex-direction:row （橫向從左到右排列==左對齊）

※ flex-direction:row-reverse （與row 相反）

※ flex-direction:column （從上往下排列==頂對齊）

※ flex-direction:column-reverse （與column 相反）

二、flex-wrap: （內(nèi)容一行容不下的時候才有效）

※flex-wrap:nowrap （超出不換行，很奇怪里面的寬度會變成100%）

※ flex-wrap:wrap （超出按父級的高度平分）

※flex-wrap:wrap-reverse（與wrap 相反）

三、justify-content: （水平對齊方式）

※flex-start （水平左對齊）

※ justify-content:flex-end; （水平右對齊）

※ justify-content:center;（水平居中對齊）

※justify-content:space-between; （兩端對齊）

※justify-content:space-around; （兩端間距對其）

四、align-items: （垂直對齊方式）

※ align-items:stretch; （默認(rèn)）

※align-items:flex-start; （上對齊，和默認(rèn)差不多）

※align-items:flex-end; （下對齊）

※ align-items:center;（居中對齊）

=※align-items:baseline; （基線對齊）

如彈性盒子元素的行內(nèi)軸與側(cè)軸（縱軸）為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。

flex容器屬性

/*1.方向*/
        /*默認(rèn)方向（row正方向）*/
        /* flex-direction: row; */
        /*row反方向*/
        /* flex-direction: row-reverse; */
        /*columnz正方向*/
        /*flex-direction: column;*/
        /*columnz反方向*/
        /*flex-direction: column-reverse;*/

        /*2.換行*/
        /*flex-wrap: wrap;*/
        /*flex-wrap: wrap-reverse;*/

        /*3.direction+wrep組合*/
        /*flex-flow: row wrap-reverse;*/

        /*4.主軸對齊*/
        /*起點左對齊*/
        /*justify-content: flex-start;*/
        /*起點右對齊*/
        /*justify-content: flex-end;*/
        /*起點居中對齊*/
        /*justify-content: center;*/
        /*間隔左右分散*/
        /*justify-content: space-between;*/
        /*間隔內(nèi)邊距相等*/
        /*justify-content: space-around;*/
        /*間隔相等*/
        /*justify-content: space-evenly;*/
        
        /*5.交叉軸對齊 當(dāng)flex-direction: row;修飾y軸, 當(dāng)flex-direction: column;修飾x軸*/
        /*默認(rèn)交叉軸對齊*/
        /*align-items: stretch;*/
        /*默認(rèn)交叉軸居中*/
        /*align-items: center;*/
        /*默認(rèn)交叉軸上對齊*/
        /*align-items: flex-start;*/
        /*默認(rèn)交叉軸下對齊*/
        /*align-items: flex-end;*/
        /*默認(rèn)交叉軸內(nèi)容對齊*/
        /*align-items: baseline;*/

        /*6.多行交叉軸對齊*/
        /*align-content: stretch;*/
        /*多行交叉軸居中對齊*/
        /*align-content: center;*/
        /*多行交叉軸上對齊*/
        /*align-content: flex-start;*/
        /*多行交叉軸下對齊*/
        /*align-content: flex-end;*/
        /*多行交叉軸內(nèi)邊距相等*/
        /*align-content: space-around;*/
        /*多行交叉軸間隔左右分散*/
        /*align-content: space-between;*/
        /*多行交叉軸間隔相等*/
        /*align-content: space-evenly;*/

flex項目屬性

/*1.控制項目次序*/
        /*order: 2;*/
        /*2.按比例擴大空間，數(shù)越大空間越大，0值不擴大*/
        /*flex-grow: 2;*/
        /*3.按比例縮小空間，數(shù)越大空間越小，0值不壓縮*/
        /*flex-shrink: 2;*/
        /*4.需要flex-direction配合使用，row=寬 column=高，并且優(yōu)先級高于width hight, auto值 讓位優(yōu)先級*/
        /*flex-basis: 600px;*/
        /*5.flex=grow+shrink+basis*/
        /*grow =1 && shrink = 1 && basis = auto*/
        /*flex: auto;*/
        /*grow =0 && shrink = 1 && basis = auto*/
        /*flex: initial;*/
         /*grow =0 && shrink = 0 && basis = auto*/
        /*flex: none;*/
        /*6.align-self覆蓋容器的align-items*/
        /*align-self: flex-start;*/

到此這篇關(guān)于css3 flex實現(xiàn)div內(nèi)容水平垂直居中的幾種方法的文章就介紹到這了,更多相關(guān)css3div水平垂直居中內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！