?

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

　

Flex在移動端開發上已是主流，比如在h5頁面，微信小程序等等。

　　為什么要用彈性布局呢？

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

實現效果：

傳統方法一：

?

傳統方法二：

?

?

Flex布局方法就簡單多了

?

　　下面是Flex的使用

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

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

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

　　

　　基本概念

　　父容器設為flex后，它所有的子元素自動成為容器成員（這里的子元素不論是什么元素，塊級還是行內，而且只作用于子元素，對孫元素無效，需要繼續在子元素上設置display：flex）。

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

?

　　容器默認存在兩根軸，水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框交叉的點）叫做main start；結束的位置叫main end；交叉軸的開始位置叫cross start；交叉軸結束的未知叫cross end。

　　子容器（項目）默認沿主軸排列，單個項目占據的主軸空間叫做main size，占據交叉軸的空間叫cross size。

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

　 作用于父容器的屬性

　　. flex-direction

　　. flex-wrap

　　. flex-flow

　　. justify-content

　　. align-items

　　. align-content

　?作用于子容器（項目）的屬性

　　. order

　　. flex-grow

　　. flex-shrink

　　. flex-basis

　　. flex

　　. align-self

?

　?詳細介紹

　容器屬性

　 1、flex-direction

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

　 。 row（默認值）：主軸為水平方向，起點在左端（從左到右排序，相當于float：left）；

　　

　 。 row-reverse：主軸為水平方向，起點在右端（從右往左排序，相當于float：right）；

　　

　 。 column：主軸為垂直方向，起點在上沿；

　　

　 。 column-reverse：主軸為垂直方向，起點在下沿。?

　　

?

　 2、flex-wrap?

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

　　

　 。 nowrap（默認）：不換行；

　　

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

　　

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

　　

　?3、flex-flow

　?flex-flow屬性是flex-direction和flex-wrap的簡寫形式，默認值：row nowrap

　　

?

　?4、justify-content

?　justify-content定義了子容器（項目）在主軸上的對齊方式。

　 。 flex-start（默認值）：左對齊;

　　

　 。 center：居中；

　　

　 。 flex-end：右對齊；

　　

　 。 space-between：兩端對齊，子容器（項目）之間的間隔相等；

　　

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

　　

?

　?5、align-items

　?align-items屬性定義了子容器（項目）在交叉軸的對齊方式。

　　

?

　 。 flex-start：交叉軸的起點對齊；

　　

　 。 center?：交叉軸居中；

　　

　 。 flex-end：交叉軸的終點對齊；

　　?

　 。 baseline：子容器（項目）的第一行文字的基線對齊；

　　

　 。 stretch（默認值）：如果子容器（項目）未設置高度或者設為auto時，將占滿整個容器的高度；

　　

　?

　?6、algin-content

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

　　

?

　 。 flex-start：與交叉軸的起點對齊;

　 。 center：與交叉軸的中點對齊；

　 。 flex-end：與交叉軸的終點對齊；

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

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

　 。 stretch（默認值）：軸線占滿整個交叉軸；

　　

　?容器（項目）屬性

　 1、order　?

　 order屬性定義項目的排列順序，數值越小，排在越前，默認為0。 .item { order: <integer> }

　?2、flex-grow

　?flex-grow屬性定義項目方大比例，默認為0，即如果存在剩余空間，也不放大。 .item{ flex-grow: <number>}? 注意：負數是相當于默認值

?　　

　　

　　

　?3、flex-shrink

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

?　　

　　

　　

　　如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。負值對該屬性無效。

　　注意：只有當父容器空間不夠時該屬性才會生效，另外當空間繼續減小時，flex-shrink屬性值越大的子容器（項目）先縮小。

?

　?4、flex-basis?

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

　 它的默認值為auto，即項目的本來大小。 .item { flex-basis: <length> | auto }

　　

　　

　　

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

?

　?5、flex

　?flex屬性是flex-grow,?flex-shrink?和?flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。

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

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

　 建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。

?

　?6、align-self

　?align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

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

　　

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

?

轉載于:https://www.cnblogs.com/Jacky-MYD/p/7692087.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。