国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端入門5-CSS彈性布局flex

王晗 / 3362人閱讀

摘要:總之有了基礎,理解彈性布局蠻容易的。語法格式當容器的設置了溢出換行屬性,且當前在交叉軸方向上存在多行的情況下,該屬性才會生效。

本篇文章已授權微信公眾號 dasu_Android(大蘇)獨家發布

聲明

本系列文章內容全部梳理自以下四個來源:

  • 《HTML5權威指南》
  • 《JavaScript權威指南》
  • MDN web docs
  • Github:smyhvae/web

作為一個前端小白,入門跟著這四個來源學習,感謝作者的分享,在其基礎上,通過自己的理解,梳理出的知識點,或許有遺漏,或許有些理解是錯誤的,如有發現,歡迎指點下。

正文-彈性布局flex

彈性布局的作用有點兒類似 Android 中 LinearLayout 和 RelativeLayout 兩者的合成版,即:支持橫向布局,縱向布局,start,end,center 布局,寬高按比例瓜分等等,當然它還有很多其他功能,比如自動換行,按指定 order 排列等??傊辛?Android 基礎,理解彈性布局 flex 蠻容易的。

可以這么的理解,傳統的網頁布局方式是通過 display 和 position 以及 float 三者完成的,借助塊級元素,行內元素特性,結合 position 指定的相對布局、絕對布局、固定布局方式來實現各種排版效果。如果需要浮動,則借助 float。

但這種傳統的方式,一來使用較復雜,二來某些排版效果不好實現,如列表、居中、響應式布局等效果。

而 flex 則能夠很好的完成傳統的布局工作,而且,它還可以支持響應式布局。

1.基礎概念

兩根軸線

當使用 flex 布局時,首先想到的是兩根軸線:主軸和交叉軸。主軸由?flex-direction?定義,另一根軸垂直于它。我們使用 flexbox 的所有屬性都跟這兩根軸線有關, 所以有必要在一開始首先理解它。

理解主軸和交叉軸的概念對于對齊 flexbox 里面的元素是很重要的;因為 flexbox 的特性是沿著主軸或者交叉軸對齊之中的元素。

布局空白

布局空白:available space,大概來說,flex 容器大小扣掉 items 的 flex-basis 指定的占據的空間大小之外剩余的區域,flex-basis 通常是指 item 本身的大小,當然也可以手動設置。

flex 的一些屬性就是通過改變 flex 容器中的布局空白分配來達到對齊等效果的。

比如 items 的 flex-grow 拉伸或者 flex 容器的 justify-content 主軸對齊等,其實就是將這些布局空白按照不同算法分配給各個 item,分給 item 時,是要直接填充進 item 的內容里達到拉伸效果,還是就簡單的將空白圍繞在 item 周圍達到類似 margin 效果來實現 item 的居中、靠左、靠右、均分等對齊方式。

具體屬性不了解沒關系,下面的章節會講,知道概念即可。

2.flex相關屬性

對任意塊級元素標簽設置 display: flex 即可讓這個元素作為 flex 容器存在,也就可以使用 flex 的相關屬性了。

flex 的屬性并不多,目前只有 13 個,其中有 7 個是 flex 彈性盒子容器本身所使用的屬性,6 個是 flex-item 彈性盒子的子項使用的屬性。其中,有些屬性只是將其他屬性的集中簡化使用,因此,真正具有布局用途的屬性并不多,很好掌握。

作用于 flex 彈性盒子容器身上的屬性:

flex-direction

語法格式:

flex-direction: row(default) | row-reverse | column | column-reverse

用于設置主軸的方向,flex 分主軸和交叉軸兩個概念,items 布局時,默認延主軸方向進行,因此通過設置主軸是水平方向還是垂直方向就可以實現 items 的水平或垂直布局。

  • row:默認值,設置主軸為水平方向
  • column:設置主軸為垂直方向

其他屬性就不介紹了,因為主軸方向就兩個,要么水平,要么垂直,其他的區別僅在于水平時是從左到右,還是從右到左,所以這個屬性的影響因素之一的 LTR 和 RTL,但沒必要考慮這么多,這些場景應該不多,知道這個是用來設置主軸方向就夠了,我覺得。

示例:

flex-wrap

語法格式:

flex-wrap: nowrap(default) | wrap | wrap-reverse

用于設置是否允許換行,默認值 nowrap。

當設置了 wrap 時,允許 items 在主軸方向溢出時自動進行換行布局,這點可以很好的用來實現響應式布局,比如當空間逐漸縮小時,原本水平排列的控件換成垂直方向排版。

示例:

flex-flow

語法格式:

flex-flow: <"flex-direction"> || <"flex-wrap">

這個屬性并沒有另外的含義,它只是 flex-direction 和 flex-wrap 的簡寫用法而已。

如果你不想多帶帶使用上述兩個屬性,可以將它們一起在 flex-flow 使用,如:

flex-flow: row wrap
//等效于
flex-direction: row;
flex-wrap: wrap;

justify-content

語法格式:

justify-content: normal(default) |  | ? [  | left | right ]
where 
 = space-between | space-around | space-evenly | stretch
 = unsafe | safe
 = center | start | end | flex-start | flex-end

用于設置 items 在主軸方向上的對齊方式,可以靠左,靠右,居中或者按比例均分等效果。

需要先明確一點概念,對齊是指 items 在 flex 容器中的排版對齊方式,那么要想 flex 容器可以控制 items 的對齊方式,那主軸方向上自然就還需要有布局空白,如果都沒有布局空白了,不就表明 items 已充滿 flex 容器了,那談何對齊。

那么,如果存在至少一個 item,它的?flex-grow?屬性不等于 0,justify-content 這個屬性就失效了,因為 flex-grow 表示允許 item 按照比例瓜分布局空白,這樣一來布局空白被瓜分完了,flex 容器在主軸方向上已被 items 充滿, 也就沒有對齊一說了。

所以要能夠正確的使用該屬性來控制 items 在主軸方向的對齊方式,那么就需要注意 item 中會影響布局空白的屬性,如 flex-grow,flex-basis 這些的使用。

下面看看各屬性值介紹(下面的介紹不考慮 RTL 的情況,默認都以 LTR 為主):

  • start:主軸是水平方向的話,左對齊方式排版;主軸是垂直方向的話,上對齊方式排版;
  • end:主軸是水平方向的話,右對齊方式排版;主軸是垂直方向的話,下對齊方式排版;
  • center:居中方式排版;
  • space-between:等比例瓜分布局空白,每行首元素對齊,末元素對齊,每行各元素間距一致;
  • space-around:與上述的類似效果,區別僅在于,每行首元素并不是在 flex 容器內容區域左邊就開始布局,它距離 flex 容器左邊的距離等于各個元素之間間距的一半。說白點,就是行首元素和末尾元素的周邊有類型 margin 值存在。

剩余的屬性值不介紹了,因為我也還沒有搞懂它們的含義和應用場景。

示例:

(ps:flex 容器設置了 padding,所以 start 和 end 才沒有貼靠邊界 )

align-items

語法格式:

align-items: normal | stretch |  | [ ?  ]
where 
 = [ first | last ]? baseline
 = unsafe | safe
 = center | start | end | self-start | self-end | flex-start | flex-end

用于控制 items 在交叉軸方向上的排版布局方式,justify-content 是能控制主軸上的排版,而這個屬性則是用于控制交叉軸,通常兩個都會一起使用,相互結合,可以達到一些類似頁面居中效果。

看看屬性值:

  • flex-start:交叉軸方向,從起點開始布局排版
  • flex-end:交叉軸方向,從末尾開始布局排版
  • center:交叉軸方向,從中間開始布局排版
  • stretch:交叉軸方向,如果 items 在交叉軸方向沒有設置大小,那么讓 items 在交叉軸的方向充滿 flex 容器的高度。

其他屬性不介紹了,不熟悉。

示例:

(ps:flex 容器設置了 padding,所以 start 和 end 才沒有貼靠邊界 )

stretch 要能夠生效,需要在 items 在交叉軸方向的不設置大小,如上圖中主軸是水平方向,那么 items 需要不設置 height,此時 stretch 才能夠讓 items 拉伸占據交叉軸的高度。

有一點需要注意,當 flex 容器的 items 在主軸方向上只有一行時,可以很明確的使用這個屬性來控制在交叉軸的排版方式。但,如果 items 在主軸上超過一行,那么最終的效果可能就不是想要的了,比如下圖:

如果是想實現多行的 items 都作為一個整體居中,那么用 align-items 就無法實現了,針對這種有多行的情況,需要用另外一個屬性來控制:align-content。

align-content

語法格式:

align-content: normal |  |  | ? 
where 
 = [ first | last ]? baseline
 = space-between | space-around | space-evenly | stretch
 = unsafe | safe
 = center | start | end | flex-start | flex-end

當 flex 容器的 items 設置了溢出換行屬性,且當前在交叉軸方向上存在多行 item 的情況下,該屬性才會生效。

網上有種翻譯,說這個屬性是用于軸對齊,我不是很理解,我自己粗俗的分兩種情況理解:

當需要進行 start, center, end 這些排版時,是將這些多行的 items 都看成一個整體,然后進行交叉軸方向上的排版控制。此時,將多行 item 看成一行之后,那么這個 align-content 之后的排版布局就跟 align-items 一樣的效果了。

其他的 space-around,space-between 究竟是如何計算排版的,不熟悉。

屬性值含義不看了,跟 align-items 一樣的效果,直接看示例:

(ps:flex 容器設置了 padding,所以 start 和 end 才沒有貼靠邊界 )

place-content

語法格式:

place-content: <"align-content"> <"justify-content">?

這個屬性并沒有另外的含義,它只是 align-content 和 justify-content 的簡寫用法而已。

如果你不想多帶帶使用上述兩個屬性,可以將它們一起在 place-content 使用,如:

place-content: center center
//等效于
align-content: center;
justify-content: center;

作用于 flex-item 彈性盒子的子項身上的屬性:

flex-basis

語法格式:

flex-basis: content | <"width">

where 
<"width"> = [  |  ] && [ border-box | content-box ]? | available | min-content | max-content | fit-content | auto

用于設置 items 在主軸方向的大小,如果主軸是水平方向,相當于設置 width,此時,該屬性值會覆蓋掉 width 設置的大小。

嘗試了下,在 chorme 瀏覽器上 content 屬性不生效,不清楚,可能不同瀏覽器行為還不一樣,既然這樣,就先暫時不深入了解這個屬性了,大概知道用于設置主軸方向上的 item 大小即可。

就算要使用,先直接用指定數值大小的方式好了。

flex-grow

語法格式:

flex-grow: 

用于設置 item 在主軸方向上的拉伸因子,即如果 flex 容器還有剩余空間,會按照各 item 設置的拉伸因子比例關系分配。默認值為 0,即不拉伸。

作用很像 Andorid 中的 LinearLayout 的 child 里設置了 layout_weight 用途一樣。

示例:

flex-shrink

語法格式:

flex-shrink: 

用于設置 item 在主軸方向上的收縮因子,跟 flex-grow 剛好反著來。當 flex 容器空間不夠,item 要溢出時,設置次屬性可控制 item 按比例進行相應收縮,以便不讓 item 溢出,默認 1,值越大收縮倍數越大,最后 item 就越小,0 表示不收縮,負值無效。

另外,如果設置了換行屬性,那么這個就無效了。換行和收縮都是用于解決 item 在主軸方向上溢出的問題,既然是互斥,且換行優先級高,那么設置了換行,就不會再對 item 進行收縮了。

示例:

flex

語法格式:

flex: none | auto | initial | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]

這屬性是 flex-grow,flex-shrink,flex-basis 三個屬性的簡化使用,有三種屬性值:

  • none:元素會根據自身寬高來設置尺寸。它是完全非彈性的:既不會縮短,也不會伸長來適應flex容器。相當于將屬性設置為 flex: 0 0 auto
  • auto:元素會根據自身的寬度與高度來確定尺寸,但是會自行伸長以吸收flex容器中額外的自由空間,也會縮短至自身最小尺寸以適應容器。這相當于將屬性設置為 flex: 1 1 auto.
  • initial:屬性默認值,?元素會根據自身寬高設置尺寸。它會縮短自身以適應容器,但不會伸長并吸收flex容器中的額外自由空間來適應容器?。相當于將屬性設置為"flex: 0 1 auto"。

flex 屬性可以指定 1 個,2 個或 3 個值。

單值語法: 值必須為以下其中之一:

  • 一個無單位數(): 它會被當作 的值。
  • 一個有效的寬度(width)值: 它會被當作 的值。
  • 關鍵字 none, auto,或initial.

雙值語法: 第一個值必須為一個無單位數,并且它會被當作的值。第二個值必須為以下之一:

  • 一個無單位數:它會被當作的值。
  • 一個有效的寬度值: 它會被當作的值。

三值語法:

  • 第一個值必須為一個無單位數,并且它會被當作的值。
  • 第二個值必須為一個無單位數,并且它會被當作 的值。
  • 第三個值必須為一個有效的寬度值, 并且它會被當作的值。

align-self

語法格式:

align-self: auto | normal | stretch |  | ? 
where 
 = [ first | last ]? baseline
 = unsafe | safe
 = center | start | end | self-start | self-end | flex-start | flex-end

用于給單個 item 設置交叉軸方向上的排版布局方式,屬性值和作用跟 align-items 一樣,區別僅在于 align-items 是 flex 容器的屬性,它會作用于所有的 items 上;而 align-self 允許對單個 item 設置,該值會覆蓋 align-items 設置的屬性值。

這樣就可以實現控制交叉軸上的每個 item 的不同布局方式,如下:

order

語法格式:

order: 

用于控制 items 的排版順序,item 將按照?order?屬性值的增序進行布局。擁有相同?order?屬性值的元素按照它們在源代碼中出現的順序進行布局。默認值為 0,可設置負值,排序將在默認不設置的 item 前面。

示例:

小結

我覺得,這些屬性大體記得每個屬性的主要用途即可,至于每個屬性值如何設置,如何相互結合使用可以達到什么樣的效果,寫代碼的時候再調就是了。

3.應用場景

以下場景中,如沒有特別指明,flex 容器基本樣式和 item 基本樣式如下:

.flex
{
    width: 200px;
    height: 200px;
    border-radius: 20px;
    background-color: #FFFFFF;
}

.dot {
    width: 50px;
    font-size: 28px;
    line-height: 50px;
    text-align: center;
    color: #FFFFFF;
    height: 50px;
    border-radius: 25px;
    background-color: black;
}

長這個樣子:

白色區域是 flex 容器,黑色圓圈是 item。

場景1:

在頁面中把一個元素居中:item 水平、垂直方向都居中

.flex
{
    display: flex;/* 聲明這個元素作為 flex 容器 */
    flex-direction: row;/*主軸為水平方向*/
    justify-content: center;/*水平居中*/
    align-items: center;/*垂直居中*/
}

場景2:

前后有固定大小 item,中間區域自動拉伸占據可用空間。



1
2
3

場景3:

響應式布局,在屏幕尺寸允許的情況下呈水平布局,但是在屏幕不允許的情況下可以水平折疊。

.flex
{
    display: flex;/* 聲明這個元素作為 flex 容器 */
    flex-direction: row;/*主軸為水平方向*/
    flex-wrap: wrap;/*溢出時換行*/
}

場景4:

水平排列的一組 item 中,前幾個左對齊,后幾個右對齊。

這個需要結合塊級元素的 margin 屬性使用,當設置 margin: auto 時表示,將盡可能占據足夠多的空間。



1
2
3


大家好,我是 dasu,歡迎關注我的公眾號(dasuAndroidTv),如果你覺得本篇內容有幫助到你,可以轉載但記得要關注,要標明原文哦,謝謝支持~

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/1616.html

相關文章

  • 給萌新的Flexbox簡易入門教程

    摘要:年末促銷葡萄城歲末福利火熱放送中近幾年,領域出現了一些復雜的專用布局工具,用以代替原有的諸如使用表格浮動和絕對定位之類的各種變通方案。重點推薦年末促銷葡萄城歲末福利火熱放送中靈活高效的前端開發工具包,可快速搭建企業應用程序 轉載請注明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。 【年末促銷】葡萄城 2018 歲末福利火熱放送中 近幾年,CSS領域出...

    王晗 評論0 收藏0
  • 前端培訓-初級階段(9 -12)

    摘要:前端最基礎的就是。往期內容前端培訓初級階段前端培訓初級階段后記慣例補上主講人文章參考資料引用培訓目錄出處已備份到筆記字體生成原理及使用技巧查詢再聊移動端頁面的適配布局教程語法篇布局教程實例篇使用實現手淘頁面的終端適配 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門,但也僅僅是入門,現在前端開發的定義已經遠遠不止這些。前端小課堂(HTML/CSS/JS...

    LancerComet 評論0 收藏0
  • 前端培訓-初級階段(9 -12)

    摘要:前端最基礎的就是。往期內容前端培訓初級階段前端培訓初級階段后記慣例補上主講人文章參考資料引用培訓目錄出處已備份到筆記字體生成原理及使用技巧查詢再聊移動端頁面的適配布局教程語法篇布局教程實例篇使用實現手淘頁面的終端適配 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門,但也僅僅是入門,現在前端開發的定義已經遠遠不止這些。前端小課堂(HTML/CSS/JS...

    netScorpion 評論0 收藏0

發表評論

0條評論

王晗

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<