這篇文章給大家分享的是有關(guān)css3中flex怎么實(shí)現(xiàn)div內(nèi)容水平垂直居中的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)專注于黃浦企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,購物商城網(wǎng)站建設(shè)。黃浦網(wǎng)站建設(shè)公司,為黃浦等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

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

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

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

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

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

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

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

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

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

三、justify-content: （水平對(duì)齊方式）

※flex-start （水平左對(duì)齊）

※ justify-content:flex-end; （水平右對(duì)齊）

※ justify-content:center;（水平居中對(duì)齊）

※justify-content:space-between; （兩端對(duì)齊）

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

四、align-items: （垂直對(duì)齊方式）

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

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

※align-items:flex-end; （下對(duì)齊）

※ align-items:center;（居中對(duì)齊）

=※align-items:baseline; （基線對(duì)齊）

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

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

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

flex項(xiàng)目屬性

/*1.控制項(xiàng)目次序*/
        /*order: 2;*/
        /*2.按比例擴(kuò)大空間，數(shù)越大空間越大，0值不擴(kuò)大*/
        /*flex-grow: 2;*/
        /*3.按比例縮小空間，數(shù)越大空間越小，0值不壓縮*/
        /*flex-shrink: 2;*/
        /*4.需要flex-direction配合使用，row=寬 column=高，并且優(yōu)先級(jí)高于width hight, auto值 讓位優(yōu)先級(jí)*/
        /*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怎么實(shí)現(xiàn)div內(nèi)容水平垂直居中”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！