在進行網頁前端設計時,需要垂直居中顯示文本,但CSS似乎沒有明確的垂直居中的代碼方法,由於目前的頁面不再考慮以前的瀏覽器了,因此採用CSS3的display:flex方法來實現。現記錄一下flex屬性的相關資料。 ...
本文內容摘自博文:https://www.cnblogs.com/qingchunshiguang/p/8011103.html、https://blog.csdn.net/ababab12345/article/details/119612918
在進行網頁前端設計時,需要垂直居中顯示文本,但CSS似乎沒有明確的垂直居中的代碼方法,由於目前的頁面不再考慮以前的瀏覽器了,因此採用CSS3的display:flex方法來實現。現記錄一下flex屬性的相關資料。
一、flex佈局是什麼?
Flex是Flexible Box的縮寫,翻譯成中文就是“彈性盒子”,用來為盒裝模型提供最大的靈活性。任何一個容器都可以指定為Flex佈局。設為Flex佈局以後,子元素的float、clear和vertical-align屬性將失效。它即可以應用於容器中,也可以應用於行內元素。
.box{ display: -webkit-flex; /*在webkit內核的瀏覽器上使用要加首碼*/ display: flex; //將對象作為彈性伸縮盒顯示 }
行內元素也可以使用Flex佈局:
.box { display: inline-flex; //將對象作為內聯塊級彈性伸縮盒顯示 }
相容性寫法:
.box { display: flex || inline-flex; }
二、flex佈局的基本概念
先來看一下這張示意圖:
採用Flex佈局的元素,被稱為Flex容器(flex container),簡稱“容器”。其所有子元素自動成為容器成員,成為Flex項目(Flex item),簡稱“項目”。
容器預設存在兩根主軸:水平方向主軸(main axis)和垂直方向交叉軸(cross axis),預設項目按主軸排列。
- main start/main end:主軸開始位置/結束位置;
- cross start/cross end:交叉軸開始位置/結束位置;
- main size/cross size:單個項目占據主軸/交叉軸的空間;
三、容器屬性
設置在容器上的屬性有6種:
屬性名稱 | 屬性含義 |
flex-direction | 容器內子項的排列方向(預設橫向排列) |
flex-wrap | 容器內子項換行方式 |
flex-flow | 以上兩個屬性的簡寫方式 |
justify-content | 子項在主軸上的對齊方式 |
align-items | 子項在交叉軸上如何對齊 |
align-content | 定義了多根軸線的對齊方式。如果子項只有一根軸線,該屬性不起作用。 |
1、flex-direction屬性:決定主軸的方向(即項目的排列方向)
.box { flex-direction: row | row-reverse | column | column-reverse; }
- row(預設):主軸水平方向,起點在左端;
- row-reverse:主軸水平方向,起點在右端;
- column:主軸垂直方向,起點在上邊沿;
- column-reserve:主軸垂直方向,起點在下邊沿。
2、flex-wrap屬性:定義換行情況
預設情況下,項目都排列在一條軸線上,但有可能一條軸線排不下。
.box{ flex-wrap: nowrap | wrap | wrap-reverse; }
- nowrap(預設):不換行;
- wrap:換行,第一行在上方;
- wrap-reverse:換行,第一行在下方。
3、flex-flow屬性:flex-direction和flex-wrap的簡寫,預設row nowrap
.box{ flex-flow: <flex-direction> || <flex-wrap>; }
4、justify-content屬性:定義項目在主軸上的對齊方式。
對齊方式與軸的方向有關,本文中假設主軸從左到右。
.box { justify-content: start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first baseline | last baseline; }
- flex-start(預設值):左對齊;
- flex-end:右對齊;
- center:居中;
- space-between:兩端對齊,項目之間間隔相等;
- space-around:每個項目兩側的間隔相等,即項目之間的間隔比項目與邊框的間隔大一倍。
5、align-items屬性:定義在交叉軸上的對齊方式
對齊方式與交叉軸的方向有關,假設交叉軸從下到上。
.box{ align-items: flex-start | flex-end | center | baseline | stretch; }
- flex-start:起點對齊;
- flex-end:終點對齊;
- center:中點對齊;
- baseline:項目的第一行文字的基線對齊;
- stretch(預設值):如果項目未設置高度或設為auto,將占滿整個容器的高度。
6、align-content屬性:定義多根軸線的對齊方式
如果項目只有一根軸線,該屬性不起作用。所以,容器必須設置flex-wrap:···;
.box{ align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
- flex-start:與交叉軸的起點對齊;
- flex-end:與交叉軸的終點對齊;
- center:與交叉軸的中點對齊;
- space-between:與交叉軸的兩端對齊,軸線之間的間隔平均分佈;
- space-around:每根軸線兩側的間隔相等,即軸線之間的間隔比軸線與邊框的間隔大一倍;
- stretch(預設值):軸線占滿整個交叉軸。
有意思的是,當你不給項目設置高度但是給容器設置align-content不為stretch時,同一軸線上的項目的高度將等於項目中高度最高的項目。
四、項目的屬性
設置在項目上的屬性也有6個:
項目名稱 | 意義與用法 |
order | 子項的排列順序。數值越小,排列越靠前,預設為0。 |
flex-grow | 子項的放大比例,預設為0,即如果存在剩餘空間,也不放大。 |
flex-shrink | 子項的縮小比例,預設為1,即如果空間不足,該項目將縮小。 |
flex-basis | 在分配多餘空間之前,子項占據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多餘空間。它的預設值為auto,即項目的本來大小。 |
flex | 是flex-grow, flex-shrink 和 flex-basis的簡寫,預設值為0 1 auto。後兩個屬性可選。 |
align-self | 允許單個子項有與其它子項不一樣的對齊方式,可覆蓋align-items屬性。預設值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同於stretch。 |
子項CSS舉例:
.flex-item { order: <integer>; } .flex-item { flex-grow: <number>; /* default 0 */ } .flex-item { flex-shrink: <number>; /* default 1 */ } .flex-item { flex-basis: <length> | auto; /* default auto */ } .flex-item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } .flex-item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
1、order屬性:定義項目的排列順序
數值越小,排列越靠前,預設為0,可以是負值。
.item { order: <整數>; }
2、flex-grow屬性:定義項目的放大比例
預設值為0,即如果空間有剩餘,也不放大。可以是小數,按比例占據剩餘空間。
.item{ flex-grow: <數字>; }
若所有項目的flex-grow的數值都相同,則等分剩餘空間:
若果有一個項目flex-grow為2,其餘都為1,則該項目占據剩餘空間是其餘的2倍:
3、flex-shrink屬性:定義項目的縮小比例
預設值都為1,即如果空間不足將等比例縮小。
如果有一個項目的值為0,其他項目為1,當空間不足時,該項目不縮小。
負值對該屬性無效,容器不應該設置flex-wrap。
.item{ flex-shrink: <非負整數>; }
如果一個項目設置flex-shrink為0;而其他項目都為1,則空間不足時,該項目不縮小:
如果所有項目都為0,則當空間不足時,項目撐破容器而溢出:
如果設置項目的flex-shrink不為0的非負數效果同設置為1:
4、flex-basis屬性:定義在分配多餘空間之前,項目占據的主軸空間
預設值為auto,瀏覽器根據此屬性檢查主軸是否有多餘空間。
.item{ flex-basis: <auto或者px>; }
註意設置的flex-basis是分配多餘空間之前項目占據的主軸空間,如果空間不足則預設情況下該項目也會縮小。
設置flex-basis為350px,但空間充足:
空間不足,項目縮小,小於設定值:
5、flex屬性:是flex-grow,flex-shrink和flex-basis的簡寫
預設值為0 1 auto,第一個屬性必須,後兩個屬性可選。
.item{ flex: none | [<flex-grow><flex-shrink><flex-basis>]; }
- 可以用 flex:auto; 代替 flex: 1 1 auto;
- 可以用 flex: none; 代替 flex: 0 0 auto;
6、align-self屬性:允許單個項目與其他項目有不一樣的對齊方式
預設值為auto,表示繼承父元素的align-items屬性,並可以覆蓋align-items屬性。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
彈性佈局相關Demo源碼:
鏈接:https://pan.baidu.com/s/1dCgusDq10I0GhfFLYfrScg 提取碼:eo5m