flex布局的常用語法

2021-09-24 21:10:28 字數 2160 閱讀 6286

前一段時間寫我的個人部落格時,用到了flex布局這個神奇的東西,頓時驚為天人,還有這麼好用的東西,果斷上手操作一波,下面是我整理的一些常用語法,以後忘了的時候再來回顧一下,要是能幫助到其他的小夥伴那就再好不過了.

先介紹一下flex

flex 是flexible box 的縮寫,意為"彈性布局",用來為盒狀模型提供最大的靈活性。 任何乙個容器都可以指定為flex布局。 webkit 核心的瀏覽器,必須加上 -webkit 字首。使用flex可以靈活的安排你頁面上元素的位置.

下面是常用屬性:

1,flex-direction 排列方式

row (預設值):主軸為水平方向,起點在左端。

row-reverse :主軸為水平方向,起點在右端。

colum :主軸為垂直方向,起點在上沿。

colum-reverse :主軸為垂直方向,起點在下沿。

2,flex-wrap 預設情況下,專案都排在一條線(又稱"軸線")上。flex-wrap屬性定義,如果一條軸線排不下,如何換行。

nowrap (預設):不換行。

wrap :換行,第一行在上方。

wrap-inverse :換行,第一行在下方。

3,justify-content 定義如何分配剩餘的空白區域

flex-start (預設值):左對齊

flex-end :右對齊

center : 居中

space-between :兩端對齊,專案之間的間隔都相等。

space-around :每個專案兩側的間隔相等。所以,專案之間的間隔比專案與邊框的間隔大一倍。

4,align-items 定義專案在交叉軸上如何對齊。

stretch (預設值):如果專案未設定高度或設為auto,將佔滿整個容器的高度。

center :交叉軸的中點對齊。

flex-start :交叉軸的起點對齊。    

flex-end :交叉軸的終點對齊。

baseline : 專案的第一行文字的基線對齊。

5,flex-flow flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,預設值為row nowrap。

6,align-content align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線,該屬性不起作用。

flex-start:與交叉軸的起點對齊。

flex-end:與交叉軸的終點對齊。

center:與交叉軸的中點對齊。

space-between:與交叉軸兩端對齊,軸線之間的間隔平均分布。

space-around:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。

stretch(預設值):軸線佔滿整個交叉軸。

auto:表示繼承父元素的align-items屬性

1,align-self align-self屬性允許單個專案有與其他專案不一樣的對齊方式,可覆蓋align-items屬性。預設值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同於stretch。

stretch (預設值):如果專案未設定高度或設為auto,將佔滿整個容器的高度。

center :交叉軸的中點對齊。

flex-start :交叉軸的起點對齊。    

flex-end :交叉軸的終點對齊。

baseline : 專案的第一行文字的基線對齊。

2,flex-grow flex-grow屬性定義專案的放大比例,預設為0,即如果存在剩餘空間,也不放大。

3,flex-shrink flex-shrink屬性定義了專案的縮小比例,預設為1,即如果空間不足,該專案將縮小。

4,flex-basis flex-basis屬性定義了在分配多餘空間之前,專案佔據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多餘空間。它的預設值為auto,即專案的本來大小。它可以設為跟width或height屬性一樣的值(比如350px),則專案將佔據固定空間。

5,flex flex屬性是flex-grow,flex-shrink和flex-basis的簡寫,容器的分配比例(推薦使用)

6,order 屬性定義專案的排列順序。數值越小,排列越靠前,預設為0。

有想深入了解的小夥伴可以參考這位大神的文章

mysql常用語法 MySQL常用語法

更新資料 update 表名 set 健名 更改的值 where 建 刪除資料 delete from 表名 where 索引 create index 索引名稱 on 表名 鍵名 建立試圖 create view 檢視名 鍵,鍵 as select matchno,abs won lost fro...

mysql基本常用語法 mysql 常用語法

1.1.開啟 service mysql start 1.2.關閉 service mysql stop 1.3.重啟 service mysql restart 2.1.密碼明文 語法 mysql u使用者名稱 p使用者密碼 舉例 mysql uroot p123456 2.2.密碼密文 語法 m...

wiki常用語法

公司啟用了streber執行部分專案管理工作。streber基於wiki系統建立。在streber中,我們可以建立專案 project 可以為專案建立milestone task等等。與其他專案管理系統一樣,可以為每乙個task分配資源,指定執行時間。由於streber基於wiki組建,具備了wik...