任何一個(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屬性
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為垂直倒序

flex-wrap屬性
默認(rèn)情況下,項(xiàng)目都排在一條線(又稱 軸線 )上。flex-wrap屬性定義,如果一條軸線排不下,如何換行。
.box{ flex-wrap: nowrap | wrap | wrap-reverse;}flex-flowflex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式,默認(rèn)值為row nowrap。
.box { flex-flow: flex-direction || flex-wrap }align-items屬性
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屬性
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屬性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屬性
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屬性
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)系我們修改或刪除,多謝。
新聞熱點(diǎn)
疑難解答
圖片精選