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

下面我們看看我們網(wǎng)站經(jīng)常遇到實(shí)例:我們要讓圖片,文字居中并且都貼底部布局,以往的經(jīng)驗(yàn)會(huì),父容器設(shè)置text-align:center,但是垂直方向就很繁瑣了,

要么父容器設(shè)置padding-top,

要么給圖片設(shè)置margin-top;

要么position去定位;

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

flex出場(chǎng)了,這時(shí)候你只需要在

父容器{

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

}

同理垂直居中的話只需要

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

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

這是常見的上下布局

justify-content有下面幾個(gè)屬性

flex-start（默認(rèn)值）：

flex-direction:column時(shí)候?yàn)樯蠈?duì)齊

flex-direction:row為左對(duì)齊

flex-end：同理column下對(duì)齊 row為右對(duì)齊

center： 居中

space-between：兩端對(duì)齊，項(xiàng)目之間的間隔都相等。

space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

左右就更簡(jiǎn)單了,對(duì)flex感興趣的可以自己去試試;

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

以下6個(gè)屬性設(shè)置在容器上。

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

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

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

它可能有4個(gè)值。

row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。

row-reverse：主軸為水平方向，起點(diǎn)在右端。

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

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

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

row-reverse為水平倒序;

column-reverse為垂直倒序

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

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

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

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

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

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

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

它可能取5個(gè)值。具體的對(duì)齊方式與交叉軸的方向有關(guān)，下面假設(shè)交叉軸從上到下。

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

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

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

baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。

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

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

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

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

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

下面講一點(diǎn)flex應(yīng)用在子集元素上

flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。

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

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

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

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

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

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

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

其實(shí)這個(gè)跟flex-grow差不多,區(qū)別就在于可以單獨(dú)設(shè)置其中某一個(gè)盒子的占比(長(zhǎng)度或者寬度)

給第三個(gè)盒子設(shè)置flex-basis:100px;

給第九個(gè)盒子設(shè)置flex-basis:200px

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫，默認(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ú)寫三個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值。

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

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

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

第三個(gè)盒子align-self:flex-end;

第五個(gè)盒子align-self;stretch;

第九個(gè)盒子align-self:flex-start;

以上就是flex布局的實(shí)例講解的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。