摘要:如何使用首先梳理一下,將屬性分為兩類作用在容器元素上的有個(gè),其實(shí)容器元素上還有一個(gè)設(shè)置的屬性作用在子元素上的有個(gè)當(dāng)時(shí)設(shè)置布局之后,子元素的的屬性將會(huì)失效。
why——為什么使用flex
長久以來,網(wǎng)頁布局是一個(gè)比較難搞的地方,各種前端前輩嘔心瀝血總結(jié)了各種奇淫巧技,比如利用float和position來實(shí)現(xiàn)居中、兩欄、三欄等等布局。然而css并不存在一個(gè)官方的布局方案,終于一種新的布局方案就出現(xiàn)了。
what——什么是flexflex即是彈性盒子布局,既然有彈性那么就說明它是可以達(dá)到自適應(yīng)的目的的。
根據(jù)我的理解,flex布局主要有兩部分需要注意,采用flex布局的元素叫做flex容器元素,flex容器元素內(nèi)部的元素叫做子元素。flex布局的所有屬性也可以分為兩類,一部分是作用在容器元素,一部分作用在子元素。
借用一張MDN的圖,首先flex布局是二維的,就像平面直角坐標(biāo)系一樣會(huì)有X軸和Y軸,所以如圖設(shè)置了display:flex的容器元素默認(rèn)有橫向的主軸(main axis)和縱向的交叉軸(cross axis),當(dāng)然了也可以設(shè)置為主軸為縱向交叉軸為橫向。
和主軸和交叉軸相關(guān)的還有main size和cross size,main size即是單個(gè)子元素占主軸的空間,cross size即是單個(gè)子元素占交叉軸的空間。
首先梳理一下,將屬性分為兩類:
作用在容器元素上的有7個(gè):flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content、place-content,其實(shí)容器元素上還有一個(gè)設(shè)置display:flex/inline-flex的屬性
作用在子元素上的有6個(gè):align-self、order、flex-grow、flex-shrink、flex-basis、flex
ps:當(dāng)時(shí)設(shè)置 flex 布局之后,子元素的 float、clear、vertical-align 的屬性將會(huì)失效。
display: flex | inline-flex
設(shè)置flex生成一個(gè)塊級(jí)的容器元素;inline-flex生成一個(gè)行級(jí)的容器元素
flex-direction: row | row-reverse | column | column-reverse
設(shè)置主軸的方向,會(huì)影響子元素在主軸的排列方向,默認(rèn)是row
flex-wrap: nowrap | wrap | wrap-reverse
主軸尺寸固定時(shí),子元素排列不下時(shí),是否要換行
flex-flow: flex-direction 和 flex-wrap 的簡寫形式(沒什么好說的
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
決定了子元素在主軸上如何對(duì)齊
align-items: flex-start | flex-end | center | baseline | stretch
決定了子元素在交叉軸上如何對(duì)齊
align-content:flex-start | flex-end | center | space-between | space-around | stretch
定義的是多艮軸線的對(duì)其方式,當(dāng)子元素只有一根軸線時(shí),這個(gè)屬性不起作用
以默認(rèn)主軸為例,如果子元素太多產(chǎn)生換行,此時(shí)子元素就有多個(gè)軸線,align-items設(shè)置的就是這多根軸線的對(duì)其方式,具體表現(xiàn)和justify-content、align-items一樣
place-content:是align-content和justify-content的縮寫
子元素屬性order:子元素在容器元素中排列的順序,數(shù)值越小排列越靠前,默認(rèn)為0,可以取負(fù)值
align-self:auto | flex-start | flex-end | center | baseline | stretch
單個(gè)子元素在交叉軸上的對(duì)其方式,取值和表現(xiàn)方式與align-items一樣,但是只作用于單個(gè)子元素
flex-basis:auto |
flex-shrink:
flex-grow:
這三個(gè)屬性放在一起說,
flex-grow定義了容器元素有剩余空間時(shí),子元素是否會(huì)放大以及如何放大,默認(rèn)為0即不放大;如果所有子元素的flex-grow都是1,則在剩余空間中,所有子元素都取一份來放大;如果某子元素的flex-grow是2,則此子元素在剩余框架中取2份來放大。
flex-shrink定義了容器元素空間不足時(shí),子元素是否會(huì)縮小以及如何縮小,默認(rèn)為1即會(huì)縮??;如果所有子元素的flex-shrink都是0,則空間不夠時(shí)不縮??;如果所有子元素的flex-shrink都是1,則空間不足時(shí),所有子元素縮小相同的比例;如果某子元素的flex-shrink是2,則該子元素縮小的比例是其他子元素的2倍。
flex-basis定義了在分配多余空間之前,子元素占據(jù)的主軸空間,瀏覽器會(huì)根據(jù)這個(gè)來計(jì)算剩余空間,也就是說設(shè)置了flex-basis的子元素會(huì)覆蓋掉原來設(shè)置的尺寸大??;默認(rèn)值為auto,即子元素原本的大小。
flex:flex-grow, flex-shrink 和 flex-basis的簡寫
參考資料:
MDN
知乎專欄-30分鐘學(xué)會(huì)flex
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/115928.html
摘要:下面我們從前端基礎(chǔ)和底層原理開始講起。對(duì)于和這三個(gè)對(duì)應(yīng)于矢量圖位圖和圖的渲染來說,給前端開發(fā)帶來了重武器,很多小游戲也因此蓬勃發(fā)展。這篇文章受眾之大,后來被人重新整理并發(fā)布為,其中還包括中文版。 showImg(https://segmentfault.com/img/bVbjM5r?w=1142&h=640); 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你! 這...
摘要:共字,讀完需分鐘。下面提出一種可以幫你寫出高可讀的實(shí)踐方法,這個(gè)方法并非原創(chuàng),最早的實(shí)踐來自于這篇文章。本文作者王仕軍,商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。 showImg(https://segmentfault.com/img/remote/1460000009341335?w=1240&h=403); 共 1926 字,讀完需 4 分鐘。所有工程師都知道,代碼是編寫...
閱讀 2686·2023-04-25 15:15
閱讀 1327·2021-11-25 09:43
閱讀 1614·2021-11-23 09:51
閱讀 1089·2021-11-12 10:36
閱讀 2891·2021-11-11 16:55
閱讀 966·2021-11-08 13:18
閱讀 736·2021-10-28 09:31
閱讀 2061·2019-08-30 15:47