您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)CSS3中Flex布局整理是什么的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
Flexbox布局模塊旨在提供一個(gè)更有效的方式,在一個(gè)容器里面去布局分配空間。即使容器的大小是未知的,或者動(dòng)態(tài)變化的。
Flex 布局背后的主要思想是讓容器能夠改變其項(xiàng)目的寬度 / 高度(和順序) ,以最佳地填充可用空間(主要是適應(yīng)各種顯示設(shè)備和屏幕大小)。 Flex 容器擴(kuò)展項(xiàng)以填充可用的空閑空間或縮小它們以防止溢出。
最重要的是,flexbox 布局與常規(guī)布局(基于垂直方向的塊布局和基于水平方向的內(nèi)聯(lián)布局)相比,具有方向不可知性。 雖然這些對于頁面來說工作得很好,但是它們?nèi)狈`活性來支持大型或復(fù)雜的應(yīng)用程序(特別是在方向改變、調(diào)整大小、拉伸、縮小等方面)。
原理
由于 flexbox 是一個(gè)完整的模塊,而不是一個(gè)單獨(dú)的屬性,它涉及到很多東西,包括它的整個(gè)屬性集。 其中一些被設(shè)置在容器上(父元素,稱為“ flex container”) ,而另一些被設(shè)置在子元素上(稱為“ flex item”)。如果“常規(guī)”布局基于塊流方向和內(nèi)聯(lián)流方向,那么 flex 布局基于“ flex-flow 方向”。 請看一下規(guī)范中的這個(gè)圖,解釋一下 flex 布局背后的主要思想。
項(xiàng)目將按照主軸(main-axis,從main start到main end)或交叉軸(從cross start到cross end)進(jìn)行布局。
main-axis:主軸線,伸縮容器的主軸線是伸縮項(xiàng)目布局的主軸線。 注意,它不一定是水平的; 它取決于 flex-direction 屬性
main-start, main-end:從 main-start 開始,到 main-end,flex 項(xiàng)目被放置在容器中
main-size:主尺寸,一個(gè)伸縮項(xiàng)目的寬度或高度,以主尺寸為準(zhǔn),是該項(xiàng)目的主尺寸。 Flex 項(xiàng)的主尺寸屬性是“ width”或“ height”,以主尺寸中的值為準(zhǔn)
cross axis:交叉軸,與主軸垂直的軸稱為交叉軸。它的方向取決于主軸的方向
cross-start | cross-end:彈性線充滿了項(xiàng)目,并放置到容器從cross-start延續(xù)到cross-end。
cross-size:flex item的寬度或高度,以交叉尺寸中的哪一個(gè)為準(zhǔn),就是項(xiàng)目的cross size。 cross size屬性是交叉尺寸中的“width”或“height”中的任何一個(gè)。
父級屬性(flex container)
1. flex-direction
flex-direction決定了主軸方向即flex item排列方向,除了默認(rèn)的row方向之外,還可以縱向、反向(row-reverse/column-reverse)排列flex item
.container { flex-direction: row | row-reverse | column | column-reverse; }
css:
.flex-container { display: flex; flex-direction: row; }
效果:
2. flex-wrap
如果我們不想在窗口變窄的情況下壓縮flex item,而是讓超出邊界的flex item換行顯示那我們可以設(shè)置flex container的flex-wrap
.container{ flex-wrap: nowrap | wrap | wrap-reverse; }
css:
.flex-container { display: flex; flex-wrap: wrap; }
效果:在頁面不斷變小的時(shí)候,就會(huì)換行
3. flex-flow
flex-direction和flex-wrap可以合并為一個(gè)屬性flex-flow,比如: flex-flow: row-reverse wrap
4. justify content
這定義了沿主軸的對齊方式。 當(dāng)一行中的所有 flex項(xiàng)都不靈活,或者靈活但已經(jīng)達(dá)到其最大大小時(shí),它有助于分配額外的剩余可用空間。 當(dāng)項(xiàng)目溢出線的時(shí)候,它也對項(xiàng)目的排列有一定的控制作用。
.container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right }
css:
.flex-container { display: flex; justify-content: center; }
效果:
5. align-items
實(shí)現(xiàn)了flex方向的居中后,垂直于主軸方向的居中可以用align-items實(shí)現(xiàn)。
.container { align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end }
css:
.flex-container { display: flex; align-items: center; }
效果:
6. align-content
多行的情況下,將在內(nèi)部對齊一個(gè) flex 容器的線,類似于調(diào)整內(nèi)容對齊主軸中單個(gè)項(xiàng)的方式。 如果flex只有一行,就不會(huì)起作用。
.container { align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline }
子類屬性(flex item)
1. order
默認(rèn)情況下,flex 項(xiàng)按源順序排列。 但是,order 屬性控制它們在 flex 容器中出現(xiàn)的順序。
css:
.one { order: 3 } .two { order: 1 } .three { order: 2 }
效果:
2. flex-grow
在上面所有的例子中,三個(gè)flex item只占據(jù)了flex container小部分空間,如果想讓flex item占滿flex container我們需要給flex item設(shè)置flex-grow屬性。顧名思義,grow意味著增長,用于控制flex item的尺寸的伸展。
css:
.one { flex-grow: 2; } .two { flex-grow: 8; } .three { flex-grow: 2; }
效果:
劃重點(diǎn)
flex-grow如果是負(fù)數(shù)則無效
每個(gè)item劃分多余的空間并不是按flex-grow的比例來劃分,是每個(gè)item自身的width * 自身的flex-grow的結(jié)果的比例來劃分!親測?。?!
3. flex-shrink
與flex-grow相對的是flex-shrink, flex-shrink用于控制子元素尺寸超過flex container后,對子元素的壓縮。 劃重點(diǎn):
flex-shrink如果是負(fù)數(shù)則無效 4. flex-basis
這定義了在分配剩余空間之前元素的默認(rèn)大小。
.flex-item { flex-basis: <length> | auto; /* default auto */ }
auto 關(guān)鍵字的意思是“查看自身的width 或 height 屬性”。
5. flex
這是 flex-grow、 flex-shrink 和 flex-basis 組合的簡稱。 第二個(gè)和第三個(gè)參數(shù)(伸縮和伸縮基礎(chǔ))是可選的。建議使用此簡寫屬性,而不是設(shè)置單個(gè)屬性。
.flex-item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
6. align-self
這允許重寫單個(gè) flex 項(xiàng)的默認(rèn)對齊方式(或 align-items 指定的對齊方式)。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
css:
.flex-container { display: flex; align-items: center; } .one { align-self: flex-end; }
效果:
感謝各位的閱讀!關(guān)于“CSS3中Flex布局整理是什么”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。