APP開發平臺 > Blog > 10分鐘學會基本的 Flexbox 布局

10分鐘學會基本的 Flexbox 布局

  什么是 Flexbox ?

  Flexbox 是 flexible box 的簡稱,意思是“靈活的盒子容器”,是 CSS3 引入的新的布局模式。它決定了元素如何在頁面上排列,使它們能在不同的屏幕尺寸和設備下可預測地展現出來。

  它之所以被稱為 Flexbox ,是因為它能夠擴展和收縮 flex 容器內的元素,以最大限度地填充可用空間。與以前布局方式(如 table 布局和浮動元素內嵌塊元素)相比,Flexbox 是一個更強大的方式:

  在不同方向排列元素

  重新排列元素的顯示順序

  更改元素的對齊方式

  動態地將元素裝入容器

  什么情況下不建議使用 Flexbox ?

  雖然 Flexbox 非常適合縮放,對齊和重新排序元素,但以下情況應該盡量避免使用 Flexbox 布局:

  整體頁面布局

  完全支持舊瀏覽器的網站

  瀏覽器支持 Flexbox 的情況

  舊版瀏覽器,如IE 11或更低版本,不支持或僅部分支持 Flexbox 。如果你想安全的使用頁面正常呈現,你應該退回到其他的 CSS 布局方式,比如結合float 的 display: inline-block 或者 display: table 等。但是,如果您只針對現代瀏覽器,那么 Flexbox 絕對值得一試。

  術語

  在 Flexbox 模型中,有三個核心概念:

  – flex 項,需要布局的元素

  – flex 容器,其包含 flex 項

  – 排列方向(direction),這決定了 flex 項的布局方向

  最好的學習方式是從經驗和例子中學習,所以讓我們開始吧!

  Level 1?—?基礎

  1)創建一個 flex 容器

  要創建一個 flex 容器,您只需要將一個 display: flex 屬性添加到一個元素上。默認情況下,所有的直接子元素都被認為是 flex 項,并從左到右依次排列在一行中。如果 flex 項的寬度總和大于容器,那么 flex 項將按比例縮小,直到它們適應 flex 容器寬度。

  2)將 flex 項排成一列

可以通過(在 flex 容器中)設置 flex-direction: column 使 flex 項垂直布局。也可以通過設置 flex-direction: column-reverse 或 flex-direction: row-reverse 來使 flex 項以相反的順序排列。

  Level 2—?新手

  1)靠右對齊的 flex 項

回想一下,每個 Flexbox 模型都有 flex 方向(主軸)。justify-content 用于指定 flex 項在 flex 方向(direction)上的對齊位置。在上面的例子中,justify-content:flex-end 表示 flex 項在水平方向上靠 flex 容器的末端對齊。這就是為什么他們被放在了右邊。

2)居中對齊的 flex 項

3)鋪開的 flex 項


您可以通過使用以下 justify-content 屬性的三個間距值之一來指定容器中 flex 項之間應顯示多少空間:

  • space-evenly : flex 容器起始邊緣和第一個 flex 項之間的間距和每個相鄰 flex 項之間的間距是相等。(作者注:該屬性以前很少看到,原因是以前瀏覽器不支持,chrome 也是 60 版本之后才支持。延伸一下,align-content: space-evenly 也是這個邏輯,建議在 chrome 60 下查看 這個demo 。 )

  • space-between : 任何兩個相鄰 flex 項之間的間距是相同的,但不一定等于第一個/最后一個  flex 項與 flex 容器邊緣之間的間距;起始邊緣和第一個項目之間的間距和末端邊緣和最后一個項目之間的間距是相等的。

  • space-around : flex 容器中的每個 flex 項的每一側間距都是相等的。請注意,這意味著兩個相鄰 flex 項之間的空間將是第一個/最后一個 flex 項與其最近邊緣之間的空間的兩倍。


作者注:網上找了一張圖片能更好的解釋  justify-content 屬性值的表現,如圖:

4)flex 項在交叉軸上的對齊

通常,我們想沿著 flex 方向(主軸)排列 flex 項,還可以在垂直于它的方向(交叉軸)上對齊 flex 項。通過設置 justify-content:center和align-items:center,可以使 flex 項水平和垂直放置在 flex 容器的中心。

5)對齊某個特定的 flex 項

可以在某個特定的 flex 項上使用 align-self CSS 屬性,來使該特定的 flex 項與容器中的其他 flex 項進行對齊。

  Level 3?—?中級

  1)允許 flex 項多行/列排列

  默認情況下, flex 項不允許多行/列排列,如果 flex 容器尺寸對于所有 flex 項來說不夠大,那么flex 項將被調整大小以適應單行或列排列。

  通過添加 flex-wrap: wrap ,可以將溢出容器的 flex 項將被排列到另一行/列中。

2)flex 項反向多行/列排列

flex-wrap:wrap-reverse 仍然使 flex 項以多行/列排列,但是它們從 flex 容器的末尾開始排列的。

3)多行/列排列的 flex 項在交叉軸上的對齊方式

默認情況下,當 flex 容器的交叉軸(cross axis)上存在多余空間時,您可以在 flex 容器上設置 align-content,以控制 flex 項在交叉軸(cross axis)上的對齊方式??赡艿闹凳?flex-start,flex-end,center,space-between,space-around ,space-evenly 和 stretch(默認)。

  Level 4?—?高級

  1)拉伸 flex 項

flex-grow 只有在 flex 容器中有剩余空間時才會生效。flex 項的 flex-grow 屬性指定該 flex 項相對于其他 flex 項將拉伸多少,以填充 flex 容器。默認值為1。當設置為 0 時,該 flex 項將不會被拉伸去填補剩余空間。在這個例子中,兩個項的比例是 1:2,意思是在被拉伸時,第一個 flex 項將占用 1/3,而第二個 flex 項將占據余下的空間。


作者注:這里特別要注意的是 flex-grow 控制的是 flex 項的拉伸比例,而不是占據 flex 容器的空間比例。

2)收縮元素

flex-shrink 只有在 flex 容器空間不足時才會生效。它指定 flex 項相對于其他 flex 項將縮小多少,以使 flex 項不會溢出 flex 容器。 默認值為 1。當設置為0時,該 flex 項將不會被收縮。在這個例子中,比例是1:2,意思是在收縮時,第一項將收縮 1/3 ,而第二個項目將被收縮 2/3 。作者注: flex-shrink 和 flex-grow 正好相反

3)設置元素的大小

您可以使用 flex-basis 定制 flex 項尺寸來代替元素的初始大小。默認情況下,其值為 flex-basis: auto,這意味該尺寸著從非 Flexbox CSS規則計算的。您還可以將其設置為某個絕對值或相對于 flex 容器百分比的值;例如 flex-basis:200px 和flex-basis:10%。

4)將 flex-grow, flex-shrink, 和 flex-basis 放在一起

flex 是 flex-grow,flex-shrink 和 flex-based 的縮寫。在這個例子中,第一個 flex 項設置為flex-grow: 1,flex-shrink: 0,flex-basis: 100px,第二個 flex 項設置為flex-grow: 2,flex-shrink: 0,flex-basis: 10%。

分析一下上面的這個例子,由于在 flex 容器(200px)中存在剩余空間 (90px),只有 flex-grow 才能起作用,flew-shrink 被忽略。第一個 flex 項的flex-grow 為 1,第2個 flex 項的flex-grow 為 2,所以第1個 flex 項拉伸 30px,第2個 flex 項拉伸 60px。

總結

Flexbox 易于學習和操作。 因為 Web 開發周期短,迭代速度很快,所以對其使用的知識尤其有用。如果你想在你的項目中使用 Flexbox 之前進行更多地嘗試,您可以訪問 Flexyboxes 和 Flexbox Froggy 練習。

更多APP資訊,請關注www.46uv.com

2018-01-24 來源:APICloud

Flexbox

高效的App定制平臺,標準化、便宜、快!

提交APP定制開發需求
人人干人人摸人人,人人干人人摸人人操,人人干人人摸人人插,人人干人人摸人人看,人人干人人摸人人入