一、flex布局基本概念

在沒有使用flex布局之前，常用布局有：流式布局，浮動布局，定位布局等等。這些布局的缺陷是子元素需要自己控制自己在父元素中的位置，還要注意父元素高度坍塌。

flex布局是一種布局模型，經常被稱之為flexbox。使用flex布局之后，它會給子元素提供強大空間分配和對齊能力。

優(yōu)點：避免不靈活的布局形式，創(chuàng)建更多種布局模式供你選擇，解決了子元素的對齊和分布與響應式等問題。

缺點：只能依靠自身的布局模式，稍有變化則無法改變。

注意事項：

1、flex布局改變的不是自身，而是自己內部的子元素。即，定義時要將flex定義在父元素，把父元素當做‘容器’，然后改變內部子元素的排列方式。

2、設置為flex布局以后，子元素的float、clear都失效了。即，子元素不用浮動了，父元素也不用清除浮動了。

3、設置了flex的元素，子元素會“塊狀化”。即，父元素使用了 display:flex 其子元素都會變成塊級元素。

二、flex布局的使用

1、基本語法

父元素設置display：flex。

2、主軸和交叉軸

語法：flex-direction

主軸和交叉軸是垂直的，兩個軸的由來取決于子元素的排列方式，如圖。

 默認情況下（不寫flex-direction）采取行模式，即主軸是水平方向。

3、主軸排序

/* 默認行模式：左  -  右 */
flex-direction : row ;

/* 行模式：右  -  左 */
flex-direction : row-reverse ;

列模式與行模式相同，不再展示。

/* 列模式：上 — 下 */
flex-direction : column ;
/* 列模式：下— 上 */
flex-direction : column-reverse ;

 如上圖，父元素寬度已經不能承載所有子元素放到一行，但是由于沒有設置換行，所以會壓縮子元素，強制排到一行。

開啟換行：flex-wrap: wrap;即可實現(xiàn)。

5、主軸的對齊方式

justify - content 定義了項目在 主軸 方向上的對齊方式，需要注意的是，要區(qū)別行模式和列模式,主要以行模式為例。

/* 默認起點對齊 */
justify-content: flex-start;
/* 終點對齊 */
justify-content: flex-end;
/* 居中對齊 */
justify-content: center;
/* 兩端對齊 */
justify-content: space-between;
/* 周圍分布相同空間 */
justify-content: space-around;
/* 均勻空間 */
justify-content: space-evenly;

下面采取圖示方式來展示這六種不同的分布方式，方便大家理解。

如果是列模式的話，也是相同的使用方法。

6、交叉軸對齊方式

/* 交叉軸起點*/
align-items: flex-start;
/* 交叉軸終點 */
align-items: flex-end;
/* 交叉軸居中 */
align-items: center;

 其實就是平時咱們說的垂直方向上居中。

關于flex布局基礎知識差不多介紹完了，這個布局是我平時使用很多的一個布局，可以解決很多手動排版以及圖片與文字對齊等等的問題，希望大家可以掌握好這個布局，會十分得心應手！

到此這篇關于詳細講解flex布局的文章就介紹到這了,更多相關flex布局使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

最新評論