CSS中flex布局實例分析

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

1. 瀏覽器 flex 兼容申明

dispaly:flex;

display:-webkit-flex;

display:-ms-flex;

display:-moz-flex;

display:-o-flex;

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

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

2.flex含義

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

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

3.flex屬性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

一共六大屬性

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

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

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

align-items 屬性定義項目在交叉軸上如何對齊

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

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

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

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

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

實際中垂直居中經常用到

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; 垂直 水平 居中 父元素反復申明流布局

/*混合版本語法*/

-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;

關于“CSS中flex布局實例分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。