目錄

• 一、flex布局基本概念
• 二、flex布局的使用
• 1、基本語法
• 2、主軸和交叉軸
• 3、主軸排序
• 5、主軸的對齊方式
• 6、交叉軸對齊方式

一、flex布局基本概念

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

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

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

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

注意事項(xiàng)：

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

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

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

二、flex布局的使用

1、基本語法

父元素設(shè)置display：flex。

2、主軸和交叉軸

語法：flex-direction

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

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

3、主軸排序

/* 默認(rèn)行模式：左  -  右 */
flex-direction : row ;

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

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

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

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

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

5、主軸的對齊方式

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

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

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

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

6、交叉軸對齊方式

/* 交叉軸起點(diǎn)*/
align-items: flex-start;
/* 交叉軸終點(diǎn) */
align-items: flex-end;
/* 交叉軸居中 */
align-items: center;

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

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

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

總結(jié)

以上是生活随笔為你收集整理的详细讲解flex布局及使用(flex布局的用法)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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