CSS工具-Flexbox簡易入門教程

智雲程式設計發表於2019-02-27

近幾年,CSS領域出現了一些複雜的專用佈局工具,用以代替原有的諸如使用表格、浮動和絕對定位之類的各種變通方案。 Flexbox ,或者說是彈性盒子佈局模組(Flexible Box Layout Module)是這些新佈局工具中的第一個,接著是 CSS網格佈局模組(CSS Grid Layout Module) 。我們會在本文給出一個易於理解的flexbox入門介紹。

隨著CSS網格佈局的引入,你可能會問flexbox佈局是否真的還有必要。雖然它們所能做的事情有一些重疊,但其各自在CSS佈局中有著非常特別的目的。一般來說,flexbox在一維場景(比如,一串類似的元素)下有最佳應用,而網格是二維場景下理想的佈局方案(例如整個頁面的元素)。

即便如此,flexbox仍可以用於整個頁面的佈局,這樣它能為那些還不支援網格佈局的瀏覽器提供合適的相容處理。(必須承認,網格佈局正在大多數現代瀏覽器中快速得到支援,不過對flexbox的支援仍然更為廣泛,所以如果你想讓你的佈局在稍微老舊的瀏覽器中也生效,使用flexbox作為網格佈局的降級方案是很容易的)。

使用Flexbox的好處

flexbox的一些好處是:

  • 頁面元素能被任意方向地放置(靠左、靠右、從上往下甚至從下往上)

  • 佈局內容的可視順序能夠被反轉或重排

  • 元素大小能“彈性”適應可用空間,並根據容器或者兄弟元素進行相應地對齊

  • 能輕鬆實現等列寬佈局(與每一列裡面的內容無關)

為了闡述其多樣的屬性和可能性,讓我們假設下面有這樣的佈局用例:

<div class="example">
  <header>
    header content here
  </header>
  <main class="main">
    <nav>
      nav content here
    </nav>
    <div class="content">
      main content here
    </div>
    <aside>
      aside content here
    </aside>
  </main>
  <footer>
    footer content here
  </footer>
</div>

首先,是把元素一起放進.main裡,比如,<nav>和<aside>。如果沒有flexbox,我們可能會把三個元素全部進行浮動,但想讓它按理想的方式工作顯得並不直觀。而且,按傳統的方式做這件事會出現一個眾所周知的問題:每一列僅僅和它的內容一樣高。因此,你可能需要把三個元素都設定為統一的高度。

讓flexbox來救場吧。

讓我們Flex

flexbox的要點是出現在display屬性上的flex值,它需要被設定在容器元素上。如此設定會讓它的子元素變成“彈性專案(flex item)”。這些彈性專案擁有一些易於使用的預設屬性。比如,它們被緊挨著放置,那些沒有特別指明寬度的元素自動佔滿了剩餘的空間。

因此,如果你給.main設定了display:flex,它的子元素.content就被自動擠在<nav>和<aside>之間。不需要再多餘的計算,多麼方便是吧?作為附加獎賞,所有三個元素神奇地擁有了相同的高度。

.main {
  display: flex;
}

請檢視下面的例子,包含了所有的細節

項的順序:Flebox的****order****屬性

另外一個flexbox的能力,是能夠輕鬆改變元素的顯示順序。讓我們假設你為一個客戶製作了上面的佈局,而她現在想要.content出現在<nav>之前。

通常,你需要深入到HTML原始碼中去,在那裡改變元素的順序。而有了Flexbox,你可以完全使用CSS完成這項任務。只需把.content的order屬性設定為-1,那麼這一列就會出現在前面,這本例就是最左邊。

.main {
  display: flex;
}
 
.content {
  order: -1;
}

本例中,你不需要改變其他列的order。例子在 flexbox-demo-2

如果你傾向於顯式地為每一列指定order,你可以將.content的order設為1,把<nav>的order設為2,把<aside>的設為3。

HTML原始碼獨立於CSS的Flexbox樣式

但你的客戶並不滿足。她想讓<footer>成為頁面的第一個元素,顯示在<header>之前。那好,同樣的,flexbox是你的朋友(雖然像在此例中,可能你得跟你的客戶好好談談,而不是跟隨指示)。因為你不僅要重排列內部元素,還要重排外部的,display:flex規則將被設定在<div class=”example”>之上。 注意這裡是如何在頁面中巢狀使用flex容器來達到你想要的效果的。

因為<header>,<main class=”main”>和<footer>相互堆疊著,你需要首先設定一個垂直上下文,它能夠透過設定flex-direction:column來快速完成。還有,<footer>的order被設定為-1,如此一來它就出現在頁面的最上頭。就這麼簡單。

.example {
  display: flex;
  flex-direction: column;
}
 
footer {
  order: -1;
}

所以,如果你想把一行元素修改為一列,或者相反,你可以使用flex-direction屬性,並設定它相應地為column或row(row是預設值)。

然而,強大的能力也到來了更多的責任:謹記,一些使用者可能會使用鍵盤來導航你的基於flexbox的網站,如果你HTML原始碼中元素的順序和螢幕上顯示的有所出入,那麼無障礙訪問的能力就成為需要認真對待的問題。

如何在Flexbox中對齊子項

Flexbox能非常直觀地處理子項的水平對齊和垂直對齊。

你可以使用align-items對flex容器中的所有子項設定統一的對齊。如果你想給個別元素設定不同的對齊方式,使用align-self。元素的對齊方式跟它所在父容器的flex-direction有關。如果它的值是row(意味著元素水平排列),對齊方式是指在垂直軸上。如果flex-direction被設定為column(意味著元素垂直排列),對齊方式就是指在水平軸上。

例如,你讓一些元素在容器中分別有不同的對齊方式,你需要:

設定每個元素的align-self屬性為合適的值。可能的值有:center,stretch(元素撐滿它的容器),flex-start,flex-end和baseline(元素被放置在父容器的baseline上)

把容器元素設定為display:flex

最後,注意父容器的flex-direction屬性,因為它關係到子元素的對齊方式。

.example {
  display: flex;
  flex-direction: column;
}
 
.red {
  align-self: center;
}
 
.blue {
  align-self: flex-start;
}
 
.pink {
  align-self: flex-end;
}

試試在下面的例子中,把父容器的flex-direction在row和column之間切換,看看它們引起的實時變化。

如果想要容器中所有的元素有統一的對齊方式,你可以在容器上使用align-items。可以的值有center,flex-start,flex-end,stretch(預設值:子項被拉伸以適應它們的容器)和baseline(子項被放置在父容器的baseline上)。

.example {
  display: flex;
  align-items: center;
}

像往常一樣,試著把父容器的flex-direction在row和column之間切換,看看它們如何影響著你設定align-items值時所發生的作用。

在Flexbox裡兩端對齊

另一個控制對齊的屬性是justify-content,當你想讓多個元素等分空間時非常有用。

可接受的值有:center,flex-start,flex-end, space-between(元素利用主軸之間的空間而排布)和space-around(元素利用主軸之前、之間和之後的空間而排布)。

例如,在之前你一直使用的簡單HTML模板裡,你可以在<main>裡找到三個元素:<nav>,.content和<aside>。之前,它們都被擠在頁面的左邊。如果你想讓它們之間有一些空間,但是不讓第一個元素的左邊有空間,也不想讓最後一個元素的右邊有空間,你可以把.main(即它們的父容器)裡的justify-content設定為space-between。

.main {
  display: flex;
  justify-content: space-between;
}

也試一下設定為space-around,觀察不同的結果。

Flexbox中彈性子項的大小

使用flex屬性,你能夠對照flex容器中其他元素來控制彈性子項的大小。

這個屬性是以下獨立屬性的簡寫:

flex-grow:一個數字,指明元素如何相對其他flex項來拉伸

flex-shrink:一個數字,指明元素如何相對其他flex項來收縮

flex-basis:元素的長度。可接受的值有:auto,inherit或者一個數字後面緊跟著%,px,em或其他長度單位。

例如,想得到三個等寬的列,只需給每一列設定flex:1,其他什麼都不用做:

nav, aside, .content {
  flex: 1;
}

如果你需要.content佔據<nav>和<aside>的兩倍寬,那麼就把.content設為flex:2,讓其他兩個為1。

那僅僅是對flex屬性最簡單的應用。同樣可以設定flex-grow,flex-shrink和flex-basis這些值,不過那超出本文的話題範圍了。

總結

如你所見,如果我們想控制元素在網頁中的佈局,flexbox可以讓我們的生活更加輕鬆。它非常穩固和可靠,讓以前那些我們每天使用的諸如使 讓容器坍縮之類的奇技淫巧,成為了過去。

像我們說的,如今,在針對整個頁面進行佈局時,CSS網格是更好的方案,但我們仍然值得去了解flexbox能做的那些事情。flexbox的最佳應用場景,體現在對元素的一維排列上,但如果有需要,它也能在稍老舊的瀏覽器中,為CSS網格佈局提供方便的替代方案。

自己是從事了五年的前端工程師,不少人私下問我,2019年前端該怎麼學,方法有沒有?

沒錯,年初我花了一個多月的時間整理出來的學習資料,希望能幫助那些想學習前端,卻又不知道怎麼開始學習的朋友。

如果你依然在程式設計的世界裡迷茫,不知道自己的未來規劃,可以加入web前端學習交流群:731771211 裡面可以與大神一起交流並走出迷茫。新手可進群免費領取學習資料,看看前輩們是如何在程式設計的世界裡傲然前行!群裡不停更新最新的教程和學習方法(進群送web前端系統學習路線,詳細的前端專案實戰教學影片),有想學習web前端的,或是轉行,或是大學生,還有工作中想提升自己能力的,正在學習的小夥伴歡迎加入

點選: 加入


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69901074/viewspace-2637132/,如需轉載,請註明出處,否則將追究法律責任。

相關文章