您好,登錄后才能下訂單哦!
這篇“flex布局基本語法有哪些”文章的知識點大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細,步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“flex布局基本語法有哪些”文章吧。
1.什么是flex布局?
Flex是FlexibleBox的縮寫,意為”彈性布局”,用來為盒狀模型提供最大的靈活性.
flex布局:.box{display:flex;}
行內(nèi)元素也可以使用flex布局:.box{display:inline-flex;}
Webkit內(nèi)核的瀏覽器,必須加上-webkit前綴:.box{display:-webkit-flex;display:flex;}
注意,設(shè)為Flex布局以后,子元素的float、clear和vertical-align屬性將失效。
2.基本概念
Flex容器(flexcontainer):采用Flex布局的元素,稱為flex容器.
Flex項目(flexitem):flex容器的所有子元素,自動成為容器成員,即flex項目.
容器的兩根軸線:水平的主軸(mainaxis),垂直的交叉軸(crossaxis).
主軸(mainaxis):開始位置->mainstart,結(jié)束位置->mainend,項目默認沿主軸排列.
交叉軸(crossaxis):開始位置->crossstart,結(jié)束位置->crossend
容器內(nèi)的單個項目占據(jù)的主軸空間叫做->mainsize,交叉軸空間叫做->crosssize
3.FLex屬性
flex屬性分為容器屬性和項目屬性.
容器屬性:flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content
項目屬性:order,flex-grow,flex-shrink,flex-basis,flex,align-self
3.1容器屬性
flex-direction:決定主軸的方向(即項目排列方向)
row:水平方向,從左到右.(默認屬性)
row-reverse:水平方向,從右到左.
column:垂直方向,從上到下.
column-reverse:垂直方向,從下到上.
flex-wrap:規(guī)定一條軸線排不下,如何換行.
nowrap:不換行(默認屬性)
wrap:換行,第一行在上邊
wrap-reverse:換行,第一行在下邊,(只行數(shù)排列相反,單行內(nèi)依舊從左到右排列,每一行都是).
flex-flow:結(jié)合flex-direction和flex-wrap,寫法如下
.box{flex-flow:columnwrap-reverse}
justify-content:定義項目在主軸上的對齊方式
flex-start:左對齊(默認值),項目以主軸的起點對齊
flex-end:右對齊,項目以主軸的終點
center:居中
space-between:兩端對齊,項目之間間隔相等
space-around:每個項目兩側(cè)的間隔相等。所以,項目之間的間隔比項目與邊框的間隔大一倍
align-items:定義項目在交叉軸的對齊方式(僅單行,多行對齊由align-content定義)
stretch:如果項目未設(shè)置高度或設(shè)為auto,將占滿整個容器的高度(默認值)
flex-start:從上到下,以交叉軸的起點為基線,向終點延伸
flex-end:從下到上,以交叉軸的終點為基線,向起點延伸
center:交叉軸的中點對齊,項目的中點放在交叉軸的中點上
baseline:以一行中每個項目的第一行文字進行對齊.
align-content:定義了容器內(nèi)有多行項目時沿交叉軸的對齊方式,如果項目只有一根軸線,該屬性不起作用
stretch:軸線占滿整個交叉軸(每行都有一條軸線),默認屬性
flex-start:以交叉軸的起點對齊
flex-end:以交叉軸的終點對齊
center:以交叉軸的中點對齊
space-between:多行項目在交叉軸上間隔平均分布
space-around:多行項目在交叉軸上兩側(cè)的間隔都相等。所以,項目在交叉軸上的間隔比項目與邊框的間隔大一倍
注:justify-content,align-items和align-content是容器的屬性,而不是項目的屬性,是設(shè)定一個容器內(nèi)項目以軸線上的某一位置對齊
3.2項目屬性
order:定義項目的排列順序,數(shù)值越小,排列越靠前.默認值為0,寫法如下
.item{order:5}
flex-grow:定義屬性項目放大比例,默認為1
如果所有項目的flex-grow屬性都為1,則它們將等分剩余空間(如果有的話)。如果一個項目的flex-grow屬性為2,其他項目都為1,則前者占據(jù)的剩余空間將比其他項多一倍
flex-shrink:定義項目縮小比例,默認為1
如果所有項目的flex-shrink屬性都為1,當空間不足時,都將等比例縮小。如果一個項目的flex-shrink屬性為0,其他項目都為1,則空間不足時,前者不縮小.負值對該屬性無效
flex-basis:定義了在分配多余空間之前,項目占據(jù)的主軸空間(mainsize),瀏覽器根據(jù)這個屬性,計算主軸是否有多余空間。它的默認值為auto,即項目的本來大小
它可以設(shè)為跟width或height屬性一樣的值(比如350px),則項目將占據(jù)固定空間
flex:結(jié)合flex-grow,flex-shrink和flex-basis的屬性,默認值為01auto,推薦優(yōu)先使用
該屬性有兩個快捷值:auto(11auto)和none(00auto
align-self:允許單個項目有與其他項目不一樣的對齊方式,可覆蓋align-items屬性,默認值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同于stretch
該屬性可能取6個值,除了auto,其他都與align-items屬性完全一致
以上就是關(guān)于“flex布局基本語法有哪些”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。