CSS Flexbox詳解

Ruheng發表於2017-12-14

Flexbox是一個強大而靈活的佈局,本篇文章主要對其進行學習瞭解。

一、Flexbox簡介

Flexbox佈局(Flexible Box)模組旨在提供一個更加有效的方式制定、調整和分佈一個容器裡的專案佈局,即使他們的大小是未知或者是動態的。簡單的理解,就是可以自動調整,計算元素在容器空間中的大小,並進行有效合理的佈局。

Flexbox佈局中有兩個重要的概念:Flex容器和Flex專案

Flex容器包含多個Flex專案,通過對Flex容器和Flex專案的具體屬性進行設定,可以達到各種各樣靈活的佈局樣式。

Flexbox使用

Flexbox的使用非常簡單,只需要對Flex容器設定display:flex或者display:inline-flex,就可以具體操作使用Flexbox佈局了。

下面以具體示例演示:

html程式碼

<div class="container">
		<div class="wrap">
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
複製程式碼

css程式碼

.container {
	width: 70%;
	height: 500px;
	margin:20px auto;
	border: 1px solid black;
}
.container .wrap {
	display: flex;
	border: 3px solid #a448cf;
	margin:20px;
    width:80%;
	height:80%  
}
.container .wrap div {
	width:150px;
	height:150px;
	background-color: #c75a5a;
	margin:10px;
}
複製程式碼

CSS Flexbox詳解

二、Flex容器

首先介紹下Flex容器的具體屬性以及具體的使用方式。

屬性 含義
flex-direction row || column || row-reverse || column-reverse 控制Flex專案沿著主軸(Main Axis)的排列方向
flex-wrap wrap || nowrap || wrap-reverse 控制Flex專案是否換行顯示
flex-flow row wrap|| row nowrap || column wrap || column nowrap 等 flex-direction和flex-wrap兩個屬性的組合速記屬性
justify-content flex-start || flex-end || center || space-between || space-around 控制 Flex專案在Main-Axis上的對齊方式
align-items flex-start || flex-end || center || stretch || baseline 控制Flex專案在Cross-Axis對齊方式
align-content flex-start || flex-end || center || stretch 用於多行的Flex容器,控制Flex專案在Cross-Axis對齊方式

1. flex-direction

flex-direction屬性控制Flex專案沿著主軸(Main Axis)的排列方向,可以是行(水平)、列(垂直)或者行和列的反向。

預設情況下flex-direction的屬性值是row,具體排列方式如下:

CSS Flexbox詳解

但是當flex-direction的屬性值是column,對應的主軸就應該垂直向下。

具體應用示例如下:

CSS Flexbox詳解

2. flex-wrap

flex-wrap屬性控制Flex專案是否換行。預設情況下,Flex容器會在一行內容納所有的Flex專案,因為flex-wrap屬性的預設值是nowrap,也就是不換行。

具體應用示例如下:

CSS Flexbox詳解
其中wrap-reverse表示Flex專案在容器中多行排列,只是方向是反的。

3. flex-flow

flex-flowflex-directionflex-wrap兩個屬性的速記屬性。

具體不再解釋,看下面示例即可:

CSS Flexbox詳解

4. justify-content

justify-content屬性,控制Flex專案在整個Main-Axis上的對齊方式。

justify-content的預設屬性值是flex-start

CSS Flexbox詳解

space-between讓flex專案兩端對齊。

space-around讓每個flex專案具有相同的空間

5. align-items

align-items控制Flex專案在Cross-Axis對齊方式。

align-items的預設值是stretch,讓所有的Flex專案高度和Flex容器高度一樣,鋪展開。

CSS Flexbox詳解
baseline讓所有flex專案在Cross-Axis上沿著他們自己的基線對齊。

其中stretchbaseline在不設定具體高度值,才會如上表現,否則會顯示固定的高度。

align-content屬性與align-items作用相同,不過該屬性只針對多行,對單行無效。

三、Flex專案

接下來繼續介紹Flex專案的具體屬性及使用方法。

屬性 含義
order 數值 根據order值重新排序。從底到高。
flex-grow 0 || positive number 控制Flex專案在容器有多餘的空間如何放大
flex-shrink 0 || positive number 控制Flex專案在容器 沒有額外空間又如何縮小
flex-basis auto || % || em || rem || px 指定Flex專案的初始大小
align-self auto || flex-start || flex-end || center || baseline || stretch 控制單個Flex專案在Cross-Axis對齊方式

1. order

order允許Flex專案在一個Flex容器中重新排序,屬性預設值是0。

依據order值的大小進行排序,按照值從低到高依次排序。

預設情況下,排序如下:

CSS Flexbox詳解
當將方塊1設定order:1後,排序如下:
CSS Flexbox詳解

如果,多個Flex專案具有相同的order值,Flex專案重新排序是基於HTML原始檔的位置進行排序。

如下所示,將方塊1和方塊2都設定為order:1

CSS Flexbox詳解

2. flex-grow 和 flex-shrink

flex-growflex-shrink屬性控制Flex專案在容器有多餘的空間如何放大(擴充套件),在沒有額外空間又如何縮小。

flex-growflex-shrink 的值可以為 0或者大於0的任何正數。

預設情況下,flex-grow屬性值設定為0,表示Flex專案不會增長,填充Flex容器可用空間。

預設情況下,flex-shrink屬性值設定為1,表示Flex專案會縮小,適應螢幕寬度。

如果把flex-grow的值設定為1,如下所示:

CSS Flexbox詳解

當多個flex專案在一行內,即不換行時,設定不同的flex-growflex-shrink 值,對應的空間分配也不同。

flex-grow

將每一個item所設定的 grow 全部加起來,獲得可用空間,然後除以總的grow值,得到單位分配空間。

根據每一個item 設定的 grow 來算,如果一個item 的grow 為 6,那麼 這個 item 在主軸上的尺寸就需要延伸 6*單位分配空間的大小。

flex-shrink

先將所有專案 按照 flex-shrink * item-size 的方式加起來 得到一個加權和,然後計算出 每一份 item 的 shrink比例: shrink比例 = flex-shrink * item-size / 之前的總和。最後每一個item 減去這個 shrink比例 * 負可用空間

在flex專案有min-width(height)max-width(height)時,對應的專案要考慮上下限值,把剩餘的伸縮值分配給其他專案。

3. flex-basis

flex-basis指定了 flex 元素在主軸方向上的初始大小,即決定了 flex專案內容的寬或者高(取決於主軸的方向)的尺寸大小。

預設情況,Flex專案的初始寬度由flex-basis的預設值決定,即:flex-basis: auto。Flex專案寬度的計算是基於內容的多少來自動計算。

flex-basiswidth/height有一定的優先順序,具體規則如下:

  • flex-basis 的優先順序比 width/height 非auto高
  • width/height auto優先順序等於 flex-basis,取兩者中的最大值。

4. align-self

align-self 控制單個專案沿著Cross-Axis的對其方式。

CSS Flexbox詳解

除了auto之外,上述示例中flex容器設定了align-itmes:center

auto 是將目標flex專案的值設定為父元素的 align-items值,或者如果該元素沒有父元素的話,就設定為 stretch。上述示例中align-items:stretch

四、總結

以上是對flexbox的整體介紹,可以看出其強大與靈活。除此之外,flexbox還有很多其他的特性以及問題,這裡就不再介紹,建議看以下兩篇文章,寫的很好,本文也主要參考了這兩篇文章。

理解Flexbox:你需要知道的一切

深入理解 flex 佈局以及計算

如果想實踐一下對flexbox的掌握,可以試著做百度前端技術學院中的這個作業

相關文章