這篇文章主要介紹“CSS中flex布局實(shí)例分析”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“CSS中flex布局實(shí)例分析”文章能幫助大家解決問題。

成都創(chuàng)新互聯(lián)公司是專業(yè)的合江網(wǎng)站建設(shè)公司，合江接單;提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行合江網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

1.瀏覽器 flex兼容申明

dispaly:flex;

display:-webkit-flex;

display:-ms-flex;

display:-moz-flex;

display:-o-flex;

運(yùn)用flex.min.css，可以讓移動端主流瀏覽器兼容flex，適用于（jquery/zepto/angular框架）

運(yùn)用data-flex.min.css，可以讓移動端主流瀏覽器兼容flex，適用于（reactjs框架）

2.flex含義

div申明 display:flex，這個div變成了一個flex容器。它的所有子元素都是Flex項(xiàng)目。

子元素不能夠使用，float、vertical-align、clear這幾個屬性

3.flex屬性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

一共六大屬性

flex-direction元素選擇X軸還是Y軸排列 值包含 row（默認(rèn)）、row-reverse、column、column-reverse（行，反行，列，反列）

justify-content從軸線那個位置開始 值包含 flex-start（默認(rèn)居左）、flex-end、center、space-between、space-around（從軸線左邊（起始）開始 、從軸線末尾開始、從中間開始、兩端對齊、中間對齊）

flex-wrap填滿一軸后的排列方式 值包含 nowrap（默認(rèn) 不換行）、wrap、wrap-reverse（不換行、換行、反轉(zhuǎn)換行）

align-items屬性定義項(xiàng)目在交叉軸上如何對齊

align-items: flex-start | flex-end | center | baseline | stretch;

justify-content屬性定義了項(xiàng)目在主軸上的對齊方式。

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

align-content:屬性定義了多根軸線的對齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

實(shí)際中垂直居中經(jīng)常用到

flex-align

flex-align:center;

-ms-flex-align:center;

-webkit-flex-items:center;

-webkit-box-align:center;

/*垂直居中*/

/*老版本語法*/

-webkit-box-align: center;

-moz-box-align: center;垂直 水平 居中 父元素反復(fù)申明流布局

/*混合版本語法*/

-ms-flex-align: center;

/*新版本語法*/

-webkit-align-items: center;

align-items: center;

/*水平居中*/

/*老版本語法*/

-webkit-box-pack: center;

-moz-box-pack: center; /*混合版本語法*/

-ms-flex-pack: center; /*新版本語法*/

-webkit-justify-content: center;

justify-content: center;

關(guān)于“CSS中flex布局實(shí)例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。