Flex,再也不用擔心頁面佈局了
佈局的傳統解決方案,基於盒狀模型,依賴 display
屬性 + position
屬性 + float
屬性。它對於那些特殊佈局非常不方便,比如,垂直居中就不容易實現。
一、Flex 佈局是什麼?
Flex 是 Flexible Box 的縮寫,意為”彈性佈局”,用來為盒狀模型提供最大的靈活性。
任何一個容器都可以指定為 Flex 佈局。
.box{
display: flex;
}
行內元素也可以使用 Flex 佈局。
.box{
display: inline-flex;
}
Webkit 核心的瀏覽器,必須加上-webkit
字首。
.box{
display : -webkit-flex; /* Safari */
display: flex;
}
注意,設為 Flex 佈局以後,子元素的float
、clear
和vertical-align
屬性將失效。
二、基本概念
採用 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
3.1 flex-direction屬性
flex-direction
屬性決定主軸的方向(即專案的排列方向)。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
它可能有4個值。
row
(預設值):主軸為水平方向,起點在左端。row-reverse
:主軸為水平方向,起點在右端。column
:主軸為垂直方向,起點在上沿。column-reverse
:主軸為垂直方向,起點在下沿。
3.2 flex-wrap屬性
預設情況下,專案都排在一條線(又稱”軸線”)上。flex-wrap
屬性定義,如果一條軸線排不下,如何換行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
它可能取三個值。
(1)nowrap
(預設):不換行。
(2)wrap
:換行,第一行在上方。
(3)wrap-reverse
:換行,第一行在下方。
3.3 flex-flow
flex-flow
屬性是flex-direction
屬性和flex-wrap
屬性的簡寫形式,預設值為row nowrap
。
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
3.4 justify-content屬性
justify-content
屬性定義了專案在主軸上的對齊方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
它可能取5個值,具體對齊方式與軸的方向有關。下面假設主軸為從左到右。
flex-start
(預設值):左對齊flex-end
:右對齊center
: 居中space-between
:兩端對齊,專案之間的間隔都相等。space-around
:每個專案兩側的間隔相等。所以,專案之間的間隔比專案與邊框的間隔大一倍。
3.5 align-items屬性
align-items
屬性定義專案在交叉軸上如何對齊。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取5個值。具體的對齊方式與交叉軸的方向有關,下面假設交叉軸從上到下。
flex-start
:交叉軸的起點對齊。flex-end
:交叉軸的終點對齊。center
:交叉軸的中點對齊。baseline
: 專案的第一行文字的基線對齊。stretch
(預設值):如果專案未設定高度或設為auto,將佔滿整個容器的高度。
3.6 align-content屬性
align-content
屬性定義了多根軸線的對齊方式。如果專案只有一根軸線,該屬性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
該屬性可能取6個值。
flex-start
:與交叉軸的起點對齊。flex-end
:與交叉軸的終點對齊。center
:與交叉軸的中點對齊。space-between
:與交叉軸兩端對齊,軸線之間的間隔平均分佈。space-around
:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。stretch
(預設值):軸線佔滿整個交叉軸。
四、專案的屬性
以下6個屬性設定在專案上。
order
flex-grow
flex-shrink
flex-basis
flex
align-self
4.1 order屬性
order
屬性定義專案的排列順序。數值越小,排列越靠前,預設為0。
.item {
order: <integer>;
}
4.2 flex-grow屬性
flex-grow
屬性定義專案的放大比例,預設為0
,即如果存在剩餘空間,也不放大。
.item {
flex-grow: <number>; /* default 0 */
}
如果所有專案的flex-grow
屬性都為1,則它們將等分剩餘空間(如果有的話)。如果一個專案的flex-grow
屬性為2,其他專案都為1,則前者佔據的剩餘空間將比其他項多一倍。
4.3 flex-shrink屬性
flex-shrink
屬性定義了專案的縮小比例,預設為1,即如果空間不足,該專案將縮小。
.item {
flex-shrink: <number>; /* default 1 */
}
如果所有專案的flex-shrink
屬性都為1,當空間不足時,都將等比例縮小。如果一個專案的flex-shrink
屬性為0,其他專案都為1,則空間不足時,前者不縮小。
負值對該屬性無效。
4.4 flex-basis屬性
flex-basis
屬性定義了在分配多餘空間之前,專案佔據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多餘空間。它的預設值為auto
,即專案的本來大小。
.item {
flex-basis: <length> | auto; /* default auto */
}
它可以設為跟width
或height
屬性一樣的值(比如350px),則專案將佔據固定空間。
4.5 flex屬性
flex
屬性是flex-grow
, flex-shrink
和 flex-basis
的簡寫,預設值為0 1 auto
。後兩個屬性可選。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
該屬性有兩個快捷值:auto
(1 1 auto
) 和 none (0 0 auto
)。
建議優先使用這個屬性,而不是單獨寫三個分離的屬性,因為瀏覽器會推算相關值。
4.6 align-self屬性
align-self
屬性允許單個專案有與其他專案不一樣的對齊方式,可覆蓋align-items
屬性。預設值為auto
,表示繼承父元素的align-items
屬性,如果沒有父元素,則等同於stretch
。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
該屬性可能取6個值,除了auto,其他都與align-items屬性完全一致。
相關推薦
Flex,再也不用擔心頁面佈局了
佈局的傳統解決方案,基於盒狀模型,依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊佈局非常不方便,比如,垂直居中就不容易實現。 一、Flex 佈局是什麼? Flex 是 Flexible Box 的縮寫,意為”彈性
適用於各種平臺的打字頁面,再也不用擔心Linux練不了打字了
一個很好的練習打字的網頁 一開始的時候用windows,練字就用金山打字通,各種版本來回安裝,每次換系統想練字都是: 搜尋框:“金山打字通“ 然後各種版本的金山打字通就出來了,也不得不說他確實很好用,在windows下就沒有任何阻擾的把它下了下來,
讓雲伺服器效能提升10倍的方法,再也不用擔心週報沒有乾貨了!
歡迎大家前往騰訊雲+社群,獲取更多騰訊海量技術實踐乾貨哦~ 本文由騰訊雲資料庫 TencentDB發表於雲+社群專欄 隨著國內服務共享化的熱潮普及,共享單車,共享雨傘,共享充電寶等各種服務如雨後春筍,隨之而來的LBS服務定位問題成為了後端服務的一個挑戰。MongoDB對LBS查詢的支援較為友好,
滑鼠側鍵遮蔽,再也不用擔心按到側鍵了。
總是不小心按到滑鼠側鍵,如果是瀏覽器的話,你的操作可能會讓你損失當前頁面你填入的重要資料。哎,好煩是不。 而且一般側鍵都是專門打遊戲用的,平時根本就很少用,但就是容易碰到。 我們的做法就是用專業滑鼠控制軟體X-Mouse Button Control,簡稱x-mouse。 下載地址:
推薦一個可解釋Shell指令碼的網站:explainshell,再也不用擔心複雜的Shell程式碼了~
在前面的文章給大家推薦過一個可檢查Shell指令碼的工具,相信大家使用以後覺得很酷吧,今天要給大家介紹的是一個可幫助你解讀Shell指令碼的網站:explainshell,要是你遇到難以理解的複雜Shell程式碼或命令列,沒準可以請求 explainshell 來獲得幫助。 explainshell
巧吃支付寶新年紅包,再也不用擔心錢花不出去了(售貨機裡面的飲料售空也沒事哦)
支付寶新年紅包怎麼花啊?支付寶實體超市/便利店/售貨機專享紅包怎麼花? 暫時不好意思,因為支付寶關閉了充值介面,所以大家只能直接在自動售水機上買飲料了,不能再充值進友寶app錢包了。 若您對“如何使用“友寶”app在自動售水機上使用“友寶錢包”支付。”有疑問,請訪問我的
自從有了BI商業智慧系統,再也不用擔心我的作圖了!!!(圖文)
最近使用spotview商業智慧系統,簡單的一點體驗分享一下。這是一個金蝶公司合作的產品,純B/S架構,設計頁面和展示端,現在這已經是不可抵擋的趨勢了。只有後臺設計模型是需要在伺服器上做,類似於資料庫裡做檢視,只要將有關聯表的欄位用線連線起來就OK了。這是做好的一個例子,圖形
學會這七個方法,再也不用擔心賬號被封
【芝麻HTTP】我們在爬蟲的時候經常會出現IP被封的情況,除了大家都知道的使用代理IP,還有什麼方法呢? 方法一 之前由於公司專案需要,採集過google地圖資料,還有一些大型網站資料。 經驗如下: 需要大量IP時,可以直接使用成熟的代理IP服務商。芝麻HTTP就是一個很好的選擇,更多可到官網諮詢ht
學會這七個方法,再也不用擔心
【芝麻HTTP】我們在爬蟲的時候經常會出現IP被封的情況,除了大家都知道的使用代理IP,還有什麼方法呢? 方法一 之前由於公司專案需要,採集過google地圖資料,還有一些大型網站資料。 經驗如下: 需要大量IP時,可以直接使用成熟的代理IP服務商。芝麻HTTP就是一個很好的
自己動手打造Github程式碼洩露監控工具!再也不用擔心程式碼洩露了!
0×00 為什麼 自從小弟上次釋出了《 自己動手打造Github程式碼洩露監控工具 》一文後,承蒙各位客官老爺捧場,閱讀量已經好幾十萬了,Github也受到了一些大佬的關注。本著精益求精的黑客精神(其實是上次的工具版本存在許多不足),經過一段時間的執行後,確實工具存在一定精確性的問題,故有此文章
用Python打造屬於自己的影咔,再也不用找電影網址了
也許你曾經為了一部電影找遍全網卻沒發現任何有用的資源,也許你曾經被披著電影外衣的網站忽悠進去而染上木馬病毒。一部小小的電影搞得你心力交瘁,懷疑人生。不過,作為一名合格的程式設計師,一向以write the code,change the world所著稱,我們寫的程式碼都能改
再也不用擔心問RecycleView了——面試真題詳解
關於RecycleView,之前我寫過一篇比較基礎的文章,主要說的是快取和優化等問題。但是有讀者反映問題不夠實際和深入。於是,我又去淘了一些關於RecycleView的面試真題,大家一起看看吧,這次的問題如果都弄懂了,下次面試再遇到RecycleView應該就沒啥可擔心的了。 * 講一下`Recycler
利用CH341A編程器刷新BIOS,恢復BIOS,媽媽再也不用擔心BIOS刷壞了
出了 顯示 進度條 電腦 src 黑屏 eight 右下角 img 前幾天,修電腦主析就搗鼓刷BIOS,結果刷完黑屏開不了機,立刻意識到完了,BIOS刷錯了。就從網上查資料,各種方法試了個遍,什麽用處都沒有。終於功夫不負有心人,找到了編碼器,知道了怎麽用。下面看看具體用
機器學習PAI為你自動寫歌詞,媽媽再也不用擔心我的freestyle了(提供數據、代碼)
找到 進行 html learn from 所有 pre 文案 對象存儲 背景 最近互聯網上出現一個熱詞就是“freestyle”,源於一個比拼rap的綜藝節目。在節目中需要大量考驗選手的freestyle能力,freestyle指的是rapper
shell定義帶變量的模板,直接修改變量,用這種方法再也不用擔心正則匹配不準的問題了
shell定義帶變量的模板 shell直接修改文件內的變量 shell不用正則修改文件內容 shell修改配置文件 之前用shell 寫腳本,有時候不光要定義一個 配置文件,很多時候還要有個模板,不同的環境直接替換相同的模板內容來用;然而,在這之前,一直都是用的 sed 、 awk 、grep
【親測有效】主頁鎖定神器,媽媽再也不用擔心我電腦瀏覽器主頁被劫持篡改了
text 問題 img strong 密碼 TE build log 電腦 很多朋友都在網上下載一些軟件或者重裝系統後發現,瀏覽器主頁被鎖定了,不管怎麽修改都改不過來,即便是殺毒軟件也拿它沒辦法,這次給大家一個自己親測的主頁鎖定神器,穩妥的解決主頁問題。 註意:主頁鎖定神
手機有了這些小程序,媽媽再也不用擔心我的手機內存不足|極限工坊淘小咖
××× 公交 proc 列表 替代 ext roc 知識 vpd 自從騰訊開始推小程序之後,各式各樣的小程序也開始層出不窮! 自從用了這些小程序,生活方便了很多,完美替代APP,拯救了手機內存不足。 今天來給大家分享幾款比較常用的。 車來了實時公交: 有沒有覺得每次去了公
當排版遇到結構化,老闆再也不用擔心預算了
桌面排版誕生於二十世紀八十年代,是指通過計算機系統進行文字編輯、版面設計和圖形影象處理,並完成符合出版要求的排版工作。早期的桌面排版軟體以頁面佈局為重點,使用外接的文書處理機來處理內容。 而如今,得益於網路的快速發展,各種軟體、外掛的改進,PDF 和其他交付方式走入了人們的視野。隨著傳統的
React效能分析利器來了,媽媽再也不用擔心我的React應用慢了
Profiler React16.5正式在devtool中加入了Profiler功能,用於收集每次變更導致的渲染時間,幫助開發者發現潛在的效能問題,有助於開發更高效能的React應用 官方部落格 如何使用 在Chrome的開發工具外掛react devtool中多了
淘寶秒殺,一招搞定|女神再也不用擔心搶不到秒殺商品了
號外號外!! 親愛的老鐵們,是不是雙十一還拿著手機整點強商品,還搶不到!還搶不到!還搶不到!原諒小編這個傷心的事情講了三遍。 下面讓小編來教你一個黑科技! 用python寫一個簡單的指令碼,搶東西再也不用手動了,交給電腦吧。相信第二天早上一起床滿滿的購物車,讓你心