一、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)容水平垂直居中的幾種方法的文章就介紹到這了,更多相關(guān)css3div水平垂直居中內(nèi)容請(qǐng)搜索萬仟網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持萬仟網(wǎng)！

總結(jié)

以上是生活随笔為你收集整理的html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。