?

　　Flex是Flexible Box的縮寫(xiě)，意為彈性布局。是W3C早期提出的一個(gè)新的布局方案。可以便捷的實(shí)現(xiàn)頁(yè)面布局，目前較高版本的主流瀏覽器都能兼容，兼容情況如下：

　

Flex在移動(dòng)端開(kāi)發(fā)上已是主流，比如在h5頁(yè)面，微信小程序等等。

　　為什么要用彈性布局呢？

　?在傳統(tǒng)的布局方案主要基于CSS盒子模型，依賴display、position、float等屬性。但是它對(duì)于一些特殊的布局非常不方便，比如盒子水平劇中，實(shí)現(xiàn)起來(lái)比較繁瑣，各種黑科技。現(xiàn)在我們用多種方法實(shí)現(xiàn)盒子劇中，基礎(chǔ)dom如下：父容器背景為粉色的容器，目標(biāo)盒子為200px的天藍(lán)色子容器：

實(shí)現(xiàn)效果：

傳統(tǒng)方法一：

?

傳統(tǒng)方法二：

?

?

Flex布局方法就簡(jiǎn)單多了

?

　　下面是Flex的使用

　　 任何一個(gè)容器都可以指定為Flex布局，寫(xiě)法： .box{ display: flex; },

　　 行內(nèi)元素也可以使用Flex布局， 寫(xiě)法：?.box{ display: inline-flex; },

　　 注意：Webkit內(nèi)核的瀏覽器需加上-webkit前綴，另外，設(shè)為Flex布局后，子元素的float、clear及vertical-alian屬性都將失效。

　　

　　基本概念

　　父容器設(shè)為flex后，它所有的子元素自動(dòng)成為容器成員（這里的子元素不論是什么元素，塊級(jí)還是行內(nèi)，而且只作用于子元素，對(duì)孫元素?zé)o效，需要繼續(xù)在子元素上設(shè)置display：flex）。

　　 Flex的基本概念就是容器和軸，容器包括外層的父容器和內(nèi)層的子容器（也叫項(xiàng)目，flex item），軸包括主軸和交叉軸。如下圖：

?

　　容器默認(rèn)存在兩根軸，水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開(kāi)始位置（與邊框交叉的點(diǎn)）叫做main start；結(jié)束的位置叫main end；交叉軸的開(kāi)始位置叫cross start；交叉軸結(jié)束的未知叫cross end。

　　子容器（項(xiàng)目）默認(rèn)沿主軸排列，單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)交叉軸的空間叫cross size。

　　Flex 布局主要涉及12個(gè)屬性（不含display：flex），其中容器和子容器各6各，但是平常使用到的基本只有4個(gè)屬性，父容器和子容器各2個(gè)。

　 作用于父容器的屬性

　　. flex-direction

　　. flex-wrap

　　. flex-flow

　　. justify-content

　　. align-items

　　. align-content

　?作用于子容器（項(xiàng)目）的屬性

　　. order

　　. flex-grow

　　. flex-shrink

　　. flex-basis

　　. flex

　　. align-self

?

　?詳細(xì)介紹

　容器屬性

　 1、flex-direction

　?flex-direction屬性決定主軸的方向，及子容器（項(xiàng)目）的排列方向。

　 。 row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端（從左到右排序，相當(dāng)于float：left）；

　　

　 。 row-reverse：主軸為水平方向，起點(diǎn)在右端（從右往左排序，相當(dāng)于float：right）；

　　

　 。 column：主軸為垂直方向，起點(diǎn)在上沿；

　　

　 。 column-reverse：主軸為垂直方向，起點(diǎn)在下沿。?

　　

?

　 2、flex-wrap?

　?默認(rèn)情況下，項(xiàng)目都排在一條線（又稱“軸線”）上。flex-wrap屬性定義，如果一條軸線排不下如何換行。

　　

　 。 nowrap（默認(rèn)）：不換行；

　　

　 。 wrap：換行，第一行在上方；

　　

　 。wrap-reverse：換行，第一行在下方；

　　

　?3、flex-flow

　?flex-flow屬性是flex-direction和flex-wrap的簡(jiǎn)寫(xiě)形式，默認(rèn)值：row nowrap

　　

?

　?4、justify-content

?　justify-content定義了子容器（項(xiàng)目）在主軸上的對(duì)齊方式。

　 。 flex-start（默認(rèn)值）：左對(duì)齊;

　　

　 。 center：居中；

　　

　 。 flex-end：右對(duì)齊；

　　

　 。 space-between：兩端對(duì)齊，子容器（項(xiàng)目）之間的間隔相等；

　　

　 。 space-around：每個(gè)子容器（項(xiàng)目）兩側(cè)的間距相等，所以子容器（項(xiàng)目）的間隔比子容器（項(xiàng)目）與邊框的間隔大一倍；

　　

?

　?5、align-items

　?align-items屬性定義了子容器（項(xiàng)目）在交叉軸的對(duì)齊方式。

　　

?

　 。 flex-start：交叉軸的起點(diǎn)對(duì)齊；

　　

　 。 center?：交叉軸居中；

　　

　 。 flex-end：交叉軸的終點(diǎn)對(duì)齊；

　　?

　 。 baseline：子容器（項(xiàng)目）的第一行文字的基線對(duì)齊；

　　

　 。 stretch（默認(rèn)值）：如果子容器（項(xiàng)目）未設(shè)置高度或者設(shè)為auto時(shí)，將占滿整個(gè)容器的高度；

　　

　?

　?6、algin-content

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

　　

?

　 。 flex-start：與交叉軸的起點(diǎn)對(duì)齊;

　 。 center：與交叉軸的中點(diǎn)對(duì)齊；

　 。 flex-end：與交叉軸的終點(diǎn)對(duì)齊；

　 。 space-between：與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布；

　 。 space-around：每根軸線兩側(cè)的間隔都相等，所以，軸線之間的間隔比軸線與邊框的間隔大一倍；

　 。 stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸；

　　

　?容器（項(xiàng)目）屬性

　 1、order　?

　 order屬性定義項(xiàng)目的排列順序，數(shù)值越小，排在越前，默認(rèn)為0。 .item { order: <integer> }

　?2、flex-grow

　?flex-grow屬性定義項(xiàng)目方大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。 .item{ flex-grow: <number>}? 注意：負(fù)數(shù)是相當(dāng)于默認(rèn)值

?　　

　　

　　

　?3、flex-shrink

　?flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。?.item { flex-shrink: <number> }

?　　

　　

　　

　　如果所有項(xiàng)目的flex-shrink屬性都為1，當(dāng)空間不足時(shí)，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0，其他項(xiàng)目都為1，則空間不足時(shí)，前者不縮小。負(fù)值對(duì)該屬性無(wú)效。

　　注意：只有當(dāng)父容器空間不夠時(shí)該屬性才會(huì)生效，另外當(dāng)空間繼續(xù)減小時(shí)，flex-shrink屬性值越大的子容器（項(xiàng)目）先縮小。

?

　?4、flex-basis?

　 flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間。

　 它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。 .item { flex-basis: <length> | auto }

　　

　　

　　

　 注意：它可以設(shè)為跟width或height屬性一樣的值（比如350px），則項(xiàng)目將占據(jù)固定空間。

?

　?5、flex

　?flex屬性是flex-grow,?flex-shrink?和?flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。

.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}

　 該屬性有兩個(gè)快捷值：auto?(1 1 auto) 和 none (0 0 auto)。

　 建議優(yōu)先使用這個(gè)屬性，而不是單獨(dú)寫(xiě)三個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值。

?

　?6、align-self

　?align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒(méi)有父元素，則等同于stretch。

　?.item {?align-self: auto | flex-start | flex-end | center | baseline | stretch;}

　　

　　注意：該屬性可能取6個(gè)值，除了auto，其他都與align-items屬性完全一致。auto為默認(rèn)值！

?

轉(zhuǎn)載于:https://www.cnblogs.com/Jacky-MYD/p/7692087.html

總結(jié)

以上是生活随笔為你收集整理的学习flex布局（弹性布局）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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