任何一個盒子都可以指定為flex布局,但是要注意，設為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。

下面我們看看我們網站經常遇到實例:我們要讓圖片,文字居中并且都貼底部布局,以往的經驗會,父容器設置text-align:center,但是垂直方向就很繁瑣了,

要么父容器設置padding-top,

要么給圖片設置margin-top;

要么position去定位;

但是注意了:雖然你這樣設置也能辦到,但是換一張圖片,大小不一致的話,哈哈,你就哭吧;

flex出場了,這時候你只需要在

父容器{

 display: flex; flex-direction:column;//讓子元素縱向布局 justify-content:flex-end;//子元素垂直方向布局，依次向下 align-items: center;//讓子元素水平方向居中

}

同理垂直居中的話只需要

justify-content:center;垂直方向居中

如果是想要圖片居頂部,文字居底部;justify-content: space-between;//兩端對齊

這是常見的上下布局

justify-content有下面幾個屬性

flex-start（默認值）：

flex-direction:column時候為上對齊

flex-direction:row為左對齊

flex-end：同理column下對齊 row為右對齊

center： 居中

space-between：兩端對齊，項目之間的間隔都相等。

space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

左右就更簡單了,對flex感興趣的可以自己去試試;

下面來具體將flex里面的各種屬性,

以下6個屬性設置在容器上。

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction屬性決定主軸的方向（即項目的排列方向）。

.box { flex-direction: row | row-reverse | column | column-reverse;}

它可能有4個值。

row（默認值）：主軸為水平方向，起點在左端。

row-reverse：主軸為水平方向，起點在右端。

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

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

row 和column上面演示過了,就是順序

row-reverse為水平倒序;

column-reverse為垂直倒序

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

.box{ flex-wrap: nowrap | wrap | wrap-reverse;}

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

.box { flex-flow: flex-direction || flex-wrap }

align-items:其實跟justify-content屬性差不多,如果在沒有指定flex-direction;的時候

align-items就是垂直方向上變化位子關系;justify-content就是水平方向上變化位子關系

.box { align-items: flex-start | flex-end | center | baseline | stretch;}

它可能取5個值。具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。

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

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

center：交叉軸的中點對齊。

baseline: 項目的第一行文字的基線對齊。

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

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

align-content:center;就是讓這三排盒子垂直方向居中

如果你設置為align-item:content;就沒有讓三個盒子一起垂直居中的效果了

.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

下面講一點flex應用在子集元素上

flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。

.item { flex-grow: number /* default 0 */}

如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。

如果給所有子集都設置flex-grow:1;將會成右邊圖,平分寬度;同理也可以平分高度;

例如給第三個盒子設置flex-grow:2,效果如下,第三個盒子分的寬度為其他的2倍

flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。

.item { flex-basis: length | auto; /* default auto */}

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

其實這個跟flex-grow差不多,區別就在于可以單獨設置其中某一個盒子的占比(長度或者寬度)

給第三個盒子設置flex-basis:100px;

給第九個盒子設置flex-basis:200px

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)。

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

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

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

該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。

第三個盒子align-self:flex-end;

第五個盒子align-self;stretch;

第九個盒子align-self:flex-start;

以上就是flex布局的實例講解的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。