第一次用 Flex 切版就上手

#CSS #Flex
Cat Sun
技術文章
第一次用 Flex 切版就上手

第一次用 Flex 切版就上手

前言

flex 是在 CSS3 發佈的屬性,目的是為了讓大家使用 flex 後能更有效率的達成想要的切版效果,像是大家在排版的時候,是不是常常會遇到垂直置中的問題呢?因此有很多人會特別整理出 「垂直置中的 X 個方法」這類型的文章,而今天要介紹的 flex 排版法,則是其中一種可以方便大家在切版時隨時設定垂直對齊的排版方法。那麼,我們就直接來介紹 flex 的使用方式吧!

Flex 的屬性使用教學

設定父層的 displayflex 或 inline-flex

display: flex | inline-flex

要使用 flex 排版的物件,首先父層的 display 一定要設定為 flexinline-flex,這樣父層裡的子元件才能吃到 flex 的屬性設定,而屬性值 inline-flex 則能讓父層保有 inline-block 的特性。

利用 flex 設定父層內的子元件大小(flex-growflex-shrinkflex-basis

flex-grow

flex-grow 是指當父層的總空間分配給所有子元件後,如果空間還有剩下來的話,設定了 flex-grow 的子元件可以從剩下的空間裡額外得到多少比例的空間,在沒有設定之前 flex-grow 的預設值為 0,表示在沒有設定的狀態下子元件都只會照自己原本的元件空間顯示,不會去佔多餘的父層空間,但是當有子元件被設定了 flex-grow 的時候,父層剩下的空間則會依照子元件們 flex-grow 的總和去分配每個元件額外可以分到多少空間,例如父層的寬度是 300px,而父層的下面有三個子元素,分別是 .a .b 和 .c 這三個子元素的寬度各是 50px,當 flex-grow 沒有設定屬性值或屬性值為 0 的時候,那 .a .b 和 .c 佔據的寬度就會是他們原始的寬,也就是 50px,但當 .a 設定 flex-grow: 1 時,父層剩下的空間將會分成一等分分給 .a,所以實際呈現的樣子就會是:

  • 父層剩下的空間 = 300px - 50px(.a 的寬) - 50px(.b 的寬) - 50px(.c 的寬) = 150px
  • .a 的寬 = 50px(.a 原始寬) + 150px(父層剩下的空間) = 200px
  • .b 和 .c 則維持原本的 50px 不變

而當我們設定了 .a 的 flex-grow 為 2,.b 的 flex-grow 為 1 時,則會像下面這樣:

  • 父層剩下的空間 = 300px - 50px(.a 的寬) - 50px(.b 的寬) - 50px(.c 的寬) = 150px
  • 每一份 flex-grow 所佔據的寬 = 150 / 3(.a 的 flex-grow: 2; + .b 的 flex-grow: 1;) = 50px
  • .a 的寬 = 50px(.a 原始寬) + 50px * 2(有兩份 flex-grow) = 150px
  • .b 的寬 = 50px(.b 原始寬) + 50px * 1(有一份 flex-grow) = 100px
  • .c 的寬維持原本的 50px 不變

flex-shrink

若說 flex-grow 代表的是子元件的伸展性,那 flex-shrink 則是指子元件的收縮性,當父元素的空間不夠放入所有子元件時,flex-shrink 的數值就控制了子元件是否能夠被收縮(預設值為 0,也就是不能收縮),以及整體收縮的比例是多少(屬性值越大則收縮的幅度越大)。

flex-basis

flex-basis 指的則是子物件的最小寬度或高度(這裡的指的是寬或高是由 flex-direction 的設定值來決定,flex-direction 將在本文後面詳述),依照上述的例子 .a .b 和 .c 的原始寬度 50px 就是利用此屬性進行設定。

而上述的三種屬性可以簡寫在一個 flex 屬性內,寫法是: flex: flex-grow 的值 flex-shrink 的值 flex-basis 的值 ;。

在父層設定 flex-flow 決定子元素的排序方向還有是否換行(flex-directionflex-wrap

flex-direction 可以決定子元件的排序方向

flex-direction: row | row-reverse | column | column-reverse

我們可以從父層設定子層物件的排列方式,在沒有設定的狀態下預設的屬性值是 row (使物件由左至右排序),而 row-reverse 則能使物件以相反方向排序(由右至左),如果希望物件是以垂直的方式編排,我們則會使用屬性值 column(使物件由上至下排序)或是 column-reverse(使物件由下至上排序)進行排序。

flex-wrap 則決定了子物件是否可以換行

flex-wrap: nowrap | wrap | wrap-reverse

flex-wrap 預設的屬性為 nowrap 不換行,wrap 為換行,wrap-reverse 為換行且排序方式與 wrap 相反。

flex-directionflex-wrap 可以簡寫為 flex-flow,寫法為:flex-flow: flex-direction的值 || flex-wrap的值

子物件的對齊設定

justify-content

justify-content: flex-start | flex-end | center | space-between | space-around;

justify-content 會依照我們設定的 flex-direction 方向,移動子物件的對齊位置,以 flex-direction: row;為例,當我們設定 justify-content: flex-start; 時子物件會向左靠齊、flex-end 會向右靠齊、center 會使子物件置中對齊、space-between 會讓第一個子物件靠左,第二個子物件靠右,並使剩下的物件等距對齊,而 space-around 則會在左右都不靠齊父層的狀況下等距對齊所有子元素。

align-items

align-items: flex-start | flex-end | center | baseline | stretch;

align-items 對齊的方向與 justify-content 相反,像當 flex-direction: row; 的時候 justify-content 控制的是子元素的左右對齊,那 align-items 就是控制子元素跟子元素之間的上下對齊,反之,當 flex-direction: column; 的時候 justify-content 控制的是子元素的上下對齊,那 align-items 就是控制子元素跟子元素之間的左右對齊,我們這裡一樣以 flex-direction: row; 為例,當我們設定 align-items: flex-star; 時子元素就會向上對齊、flex-end 時會向下對齊、center 時會置中對齊、baseline 時會以物件的基準線為主進行對齊,而 stretch 則可以自動將子元素的高度延展成一樣的高度。

align-content

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

align-content 是多行的屬性,當子元素的數量多到換行時 align-content 會對整個子元素區塊設定對齊方式,而屬性值代表的意思與上述的屬性值大多相同,故此不再復述。

結語

透過 flex 的對齊特性,我們可以用更方便的方式佈局我們要切的畫面,希望這篇文章能幫助大家在未來實作時能有更多切版屬性的選擇,如果對文章有任何問題也歡迎提出來一起討論。


👩‍🏫 課務小幫手:

✨ 想掌握 HTML 觀念和原理嗎?

我們有開設 🪁 HTML 網頁設計新手村 課程唷 ❤️️