css3中flexbox伸縮盒深入理解

這個背後有一個悲傷的故事,所以就取了個這麽有點像標題黨的標題,具體什麽我就不說了。很早之前就知道css3裏面有這麽個東西,而且隨著規範的改變,它的版本也改了幾次。

也就是因爲這個flexbox伸縮盒布局太強大了,以至于我沒在意它也是display的一個屬性。

要想解決這個布局問題,我們還是先了解一些基礎的問題。先回顧下display有哪些屬性吧:

none:隱藏對象。與visibility屬性的hidden值不同,其不爲被隱藏的對象保留其物理空間
inline:指定對象爲內聯元素。block:指定對象爲塊元素。
list-item:指定對象爲列表專案。inline-block:指定對象爲內聯塊元素。(CSS2)
table:指定對象作爲塊元素級的表格。類同于html標簽<table>(CSS2)
inline-table:指定對象作爲內聯元素級的表格。類同于html標簽<table>(CSS2)
table-caption:指定對象作爲表格標題。類同于html標簽<caption>(CSS2)
table-cell:指定對象作爲表格單元格。類同于html標簽<td>(CSS2)
table-row:指定對象作爲表格行。類同于html標簽<tr>(CSS2)
table-row-group:指定對象作爲表格行組。類同于html標簽<tbody>(CSS2)
table-column:指定對象作爲表格列。類同于html標簽<col>(CSS2)
table-column-group:指定對象作爲表格列組顯示。類同于html標簽<colgroup>(CSS2)
table-header-group:指定對象作爲表格標題組。類同于html標簽<thead>(CSS2)
table-footer-group:指定對象作爲表格腳注組。類同于html標簽<tfoot>(CSS2)
run-in:根據上下文決定對象是內聯對象還是塊級對象。(CSS3)
box:將對象作爲彈性伸縮盒顯示。(伸縮盒最老版本)(CSS3)
inline-box:將對象作爲內聯塊級彈性伸縮盒顯示。(伸縮盒最老版本)(CSS3)
flexbox:將對象作爲彈性伸縮盒顯示。(伸縮盒過渡版本)(CSS3)
inline-flexbox:將對象作爲內聯塊級彈性伸縮盒顯示。(伸縮盒過渡版本)(CSS3)
flex:將對象作爲彈性伸縮盒顯示。(伸縮盒最新版本)(CSS3)
inline-flex:將對象作爲內聯塊級彈性伸縮盒顯示。(伸縮盒最新版本)(CSS3)

可以看到,目前最新的版本是display:flex ;當然要是用以前過度版本的估計還有用,但我們還是跟著最新的規範來。

我們再了解下伸縮盒的定義和一些概念的東西吧:

Flexbox(伸縮布局盒) 是 CSS3 中一個新的布局模式,爲了現代網路中更爲複雜的網頁需求而設計。

雖然現在我們可以使用 Flexbox 輕松創建布局,而不會像以前那樣難以理解,但我們仍然需要花一些時間去熟悉到底如何使用 Flexbox。新的術語和概念可能會是我們使用 Flexbox 時的一個障礙,所以讓我們先來了解以下它們。

Flexbox 由 伸縮容器 和 伸縮專案 組成。通過設置元素的 display 屬性爲 flex 或 inline-flex 可以得到一個伸縮容器。設置爲 flex 的容器被渲染爲一個塊級元素,而設置爲 inline-flex 的容器則渲染爲一個行內元素。

Flexbox 規範的相關工作已經進展了3年。不同的浏覽器也實現了不同的實驗版本。在2012年9月,Flexbox 語法的第三個主要修訂版本進入到候選推薦階段。這意味著 W3C 認爲當前的語法是穩定的,並鼓勵浏覽器開發商去實現它。總之,伸縮盒布局,是我見過的最操蛋的規範,從2009發布到去年最終定下來,更弦換轍了三次。

Flexbox 規範時間表:

2009年7月 工作草案 (display: box;)
2011年3月 工作草案 (display: flexbox;)
2011年11月 工作草案 (display: flexbox;)
2012年3月 工作草案 (display: flexbox;)
2012年6月 工作草案 (display: flex;)
2012年9月 候選推薦 (display: flex;)

Flexbox 已經被浏覽器快速支持。Chrome 22+, Opera 12.1+, 和 Opera Mobile 12.1+ 已經支持了本文中所描述的 Flexbox。Firefox 18 和 Blackberry 10 也很快就會實現。我推薦大家使用已經支持的浏覽器來閱讀本文和查看例子。雖然如此,但是很多浏覽器廠商都高了一個私有前綴,所以特別麻煩:

div{

display: -webkit-box;

display: -moz-box;

display: -o-box;

display: -ms-flexbox;

display: -webkit-flex;

display: -moz-flex;

display: -ms-flex;

display: -o-flex;

display: flex;

}

我們再來看看它有哪些屬性:
Properties
屬性 CSS Version
版本 Inherit From Parent
繼承性 Description
簡介
flex CSS3 無 複合屬性。設置或檢索伸縮盒對象的子元素如何分配空間。
flex-grow CSS3 無 設置或檢索彈性盒的擴展比率。
flex-shrink CSS3 無 設置或檢索彈性盒的收縮比率
flex-basis CSS3 無 設置或檢索彈性盒伸縮基准值。
flex-flow CSS3 無 複合屬性。設置或檢索伸縮盒對象的子元素排列方式。
flex-direction CSS3 無 設置或檢索伸縮盒對象的子元素在父容器中的位置。
flex-wrap CSS3 無 設置或檢索伸縮盒對象的子元素超出父容器時是否換行。
align-content CSS3 無 設置或檢索彈性盒堆疊伸縮行的對齊方式。
align-items CSS3 無 設置或檢索彈性盒子元素在側軸(縱軸)方向上的對齊方式。
align-self CSS3 無 設置或檢索彈性盒子元素自身在側軸(縱軸)方向上的對齊方式。
justify-content CSS3 無 設置或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式。
order CSS3 無 設置或檢索伸縮盒對象的子元素出?的?序。
1:flex

取值:

none:none關鍵字的計算值爲: 0 0 auto

[ flex-grow ]:定義彈性盒子元素的擴展比率。

[ flex-shrink ]:定義彈性盒子元素的收縮比率。

[ flex-basis ]:定義彈性盒子元素的默認基准值。

這裏flex-grow,flex-shrink,flex-basis可以單獨使用例如:flex-grow:1,也可以幾個在一起縮寫使用,例如:flex:1 1 100px;表示不擴展也不伸縮,設置寬度爲100px。

看一個DEMO:

這裏面一開始定義了每個Box 400px,所以第一個每個小塊都是133px.第二個box(box2)由于每個塊都設置了擴展和伸縮比率還有基准值100px。這裏我們可以計算得:100+100+100=300px,但是因爲它的ID設置了寬度爲400px,所以會空出100px,但是它還有設置了擴展比率,所以計算得:100*1+100*2+100*3=600px;,最後我們可以算出每個小塊將要增加的寬度:

第一個:1*100/600*100約等于17px;

第二個小塊:2*100/600*100約等于33px;

第三個小塊:3*100/600*100等于50px

也就是說box2裏第一塊區域的寬度爲117px,第二小塊的寬度爲133px,第三個小塊的寬度爲150px;

同樣的算法你可以去試試box3的各個寬度。
2.flex-flow

flex-flow是個複合屬性,接受這兩類值:[ flex-direction ] [ flex-wrap ]。

要不我們先熟悉下flex-direction和flex-wrap吧

flex-direction用來定義彈性盒子元素的排列方向。

語法:flex-direction:row | row-reverse | column | column-reverse默認值是row,無繼承性。

row:橫向從左到右排列(左對齊),默認的排列方式。row-reverse:反轉橫向排列(右對齊,從後往前排,最後一項排在最前面。column:縱向排列。row-reverse:反轉縱向排列,從後往前排,最後一項排在最上面。

看一個DEMO

再來看看:flex-wrap:nowrap | wrap | wrap-reverse 表示定義彈性盒子元素溢出父容器時是否換行。默認值爲nowrap。可取值:nowrap:當子元素溢出父容器時不換行。wrap:當子元素溢出父容器時自動換行。wrap-reverse:反轉 wrap 排列。

看一個DEMO:

現在flex-flow的屬性搞清楚了,我們可以結合兩個來寫一個DEMO:
3.再看看align-content屬性吧:

align-content:flex-start | flex-end | center | space-between | space-around | stretch
用于多行的彈性盒模型容器
各個屬性值的意思:
flex-start: 各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側軸起始邊界緊靠住該彈性盒容器的側軸起始邊界,之後的每一行都緊靠住前面一行。
flex-end: 各行向彈性盒容器的結束位置堆疊。彈性盒容器中最後一行的側軸起結束界緊靠住該彈性盒容器的側軸結束邊界,之後的每一行都緊靠住前面一行。
center: 各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時在彈性盒容器中居中對齊,保持彈性盒容器的側軸起始內容邊界和第一行之間的距離與該容器的側軸結束內容邊界與第最後一行之間的距離相等。(如果剩下的空間是負數,則各行會向兩個方向溢出的相等距離。)
space-between: 各行在彈性盒容器中平均分布。如果剩余的空間是負數或彈性盒容器中只有一行,該值等效于’flex-start’。在其它情況下,第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始內容邊界,最後一行的側軸結束邊界緊靠住彈性盒容器的側軸結束內容邊界,剩余的行則按一定方式在彈性盒窗口中排列,以保持兩兩之間的空間相等。
space-around: 各行在彈性盒容器中平均分布,兩端保留子元素與子元素之間間距大小的一半。如果剩余的空間是負數或彈性盒容器中只有一行,該值等效于’center’。在其它情況下,各行會按一定方式在彈性盒容器中排列,以保持兩兩之間的空間相等,同時第一行前面及最後一行後面的空間是其他空間的一半。
stretch: 各行將會伸展以占用剩余的空間。如果剩余的空間是負數,該值等效于’flex-start’。在其它情況下,剩余空間被所有行平分,以擴大它們的側軸尺寸。

看一個DEMO:
4.align-items

語法:align-items:flex-start | flex-end | center | baseline | stretch
每個值的意思:
flex-start: 彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end: 彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸結束邊界。
center: 彈性盒子元素在該行的側軸(縱軸)上居中放置。(如果該行的尺寸小于彈性盒子元素的尺寸,則會向兩個方向溢出相同的長度)。
baseline: 如彈性盒子元素的行內軸與側軸爲同一條,則該值與’flex-start’等效。其它情況下,該值將參與基線對齊。
stretch: 如果指定側軸大小的屬性值爲’auto’,則其值會使專案的邊距盒的尺寸盡可能接近所在行的尺寸,但同時會遵照’min/max-width/height’屬性的限制。

DEMO:
5.align-self
align-self:auto | flex-start | flex-end | center | baseline | stretch默認值:auto
適用于:彈性盒模型子元素繼承性:無
取值:

auto:
如果’align-self’的值爲’auto’,則其計算值爲元素的父元素的’align-items’值,如果其沒有父元素,則計算值爲’stretch’。
flex-start:
彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end:
彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸結束邊界。
center:
彈性盒子元素在該行的側軸(縱軸)上居中放置。(如果該行的尺寸小于彈性盒子元素的尺寸,則會向兩個方向溢出相同的長度)。
baseline:
如彈性盒子元素的行內軸與側軸爲同一條,則該值與’flex-start’等效。其它情況下,該值將參與基線對齊。
stretch:
如果指定側軸大小的屬性值爲’auto’,則其值會使專案的邊距盒的尺寸盡可能接近所在行的尺寸,但同時會遵照’min/max-width/height’屬性的限制
DEMO木有了
6.justify-content

用于設置或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式。

當彈性盒裏一行上的所有子元素都不能伸縮或已經達到其最大值時,這一屬性可協助對多余的空間進行分配。當元素溢出某行時,這一屬性同樣會在對齊上進行控制。

語法:

justify-content:flex-start | flex-end | center | space-between | space-around

默認值:flex-start

適用于:彈性盒模型容器

繼承性:無
取值:

flex-start:
彈性盒子元素將向行起始位置對齊。該行的第一個子元素的主起始位置的邊界將與該行的主起始位置的邊界對齊,同時所有後續的伸縮盒專案與其前一個專案對齊。
flex-end:
彈性盒子元素將向行結束位置對齊。該行的第一個子元素的主結束位置的邊界將與該行的主結束位置的邊界對齊,同時所有後續的伸縮盒專案與其前一個專案對齊。
center:
彈性盒子元素將向行中間位置對齊。該行的子元素將相互對齊並在行中居中對齊,同時第一個元素與行的主起始位置的邊距等同與最後一個元素與行的主結束位置的邊距(如果剩余空間是負數,則保持兩端相等長度的溢出)。
space-between:
彈性盒子元素會平均地分布在行裏。如果最左邊的剩余空間是負數,或該行只有一個子元素,則該值等效于’flex-start’。在其它情況下,第一個元素的邊界與行的主起始位置的邊界對齊,同時最後一個元素的邊界與行的主結束位置的邊距對齊,而剩余的伸縮盒專案則平均分布,並確保兩兩之間的空白空間相等。
space-around:
彈性盒子元素會平均地分布在行裏,兩端保留子元素與子元素之間間距大小的一半。如果最左邊的剩余空間是負數,或該行只有一個伸縮盒專案,則該值等效于’center’。在其它情況下,伸縮盒專案則平均分布,並確保兩兩之間的空白空間相等,同時第一個元素前的空間以及最後一個元素後的空間爲其他空白空間的一半。
DEMO;

7.order

用于設置或檢索彈性盒模型對象的子元素出?的?序。

用法:order:<integer>

<integer>:用整數值來定義排列順序,數值小的排在前面。可以爲負值。

DEMO:

上文介紹了flexbox的基本語法和一些屬性的使用,這裏我們通過實戰來更了解這個伸縮盒布局(彈性盒)
我們知道CSS3 彈性盒,是一種當頁面需要適應不同的螢幕大小以及設備類型時確保元素擁有恰當的行爲的布局方式。對于很多應用來講,彈性盒在兩個方面相對于盒模型進行了提升,它既不使用浮動,也不會導致彈性盒容器的外邊距與其內容的外邊距之間發生塌陷。
現在我們再來回顧下彈性盒的概念:
彈性盒布局的定義中,它可以自動調整子元素的高和寬,來很好的填充任何顯示設備中的可用顯示空間,收縮內容防止內容溢出。

不同于盒布局的基于垂直方向以及行內布局的基于水平方向,彈性盒布局的算法是方向無關的。 雖然盒布局在頁面中工作良好,但是其定義不足以支持那種需要根據用戶代理從豎直切換成水平等變化而進行方向切換、大小調整、拉伸、收縮的引用組件。不同于將要出現的網格布局針對目標爲大比例布局,彈性盒布局更適用于應用組件和小比例布局。這兩種都是CSS工作組爲了能與不同用戶代理、不同書寫模式和其他彈性需要進行協作而做出的努力。

我們可以用display:flex和display:inline-flex來創建彈性盒。flex 值表示彈性容器爲塊級。inline-flex 值表示彈性容器爲原子行級元素 。裏面的元素就稱爲彈性子元素
彈性子元素的注意事項
包含在彈性容器內的文本自動成爲匿名的彈性子元素。然而,只包含空白的彈性子元素不會被渲染,就好像它被設定爲 display:none 一樣。

彈性容器的絕對定位的子元素會被定位,因此其靜態位置會根據它們的彈性容器的主起始內容盒的角落上開始。

目前由于一個已知的問題,在彈性子元素上指定 visibility:collapse
會導致其好像被指定了 display:none 一樣,但該操作的初衷是使元素具有好像被指定了 visibility:hidden 一樣的效果。在該問題被解決之前建議使用visibility:hidden ,其效果在彈性子元素上等同于 visibility:collapse 。

相鄰的彈性子元素不會發生外邊距合並。使用 auto 的外邊距會在垂直和水平方向上帶來額外的空間,這種性質可用于對齊或分隔臨近的彈性子元素。W3C彈性盒子布局模型的 使用’auto’的外邊距進行對齊 部分有更多信息。
彈性盒子的對齊會進行真正的居中,不像CSS的其他居中方法。這意味著即使彈性容器溢出,子元素仍然保持居中。有些時候這可能有問題,然而即使溢出了頁面的 上沿,或左邊沿(在從左到右的語言如英語;這個問題在從右到左的語言中發生在右邊沿,如阿拉伯文),因爲你不能滾動到那裏,即使那裏有內容!在將來的版本 中,對齊屬性會被擴展爲有一個“安全”選項。目前,如果關心這個問題,你可以使用外邊距來達到居中的目的,這種方式比較“安全”,在溢出的情況下會停止居 中。在你想要居中的彈性子元素上應用自動外邊距代替align-屬性。在彈性容器的第一個和最後一個子元素的外側應用自動外邊距來代替justify-屬性。自動外邊距會伸縮並假定剩余空間,當有剩余空間時居中彈性子元素,沒有剩余空間時切換會正常對齊模式。然而,如果你想要在多線彈性盒子中用基于外邊距的居中替換justify-content屬性,你可能就沒那麽幸運了,因爲你需要在每一線的第一個和最後一個元素上應用外邊距。除非你能提前預測哪個元素是哪一線上的最後一個元素,否則你沒法穩定地在主軸上用基于外邊距的居中代替 justify-content 屬性。

說起雖然元素的顯示順序與源代碼中的順序無關,這種無關僅對顯示效果有效,不包括語音順序和基于源代碼的導航。即使是 order 也不影響語言和導航序列。因此開發者必須小心排列源代碼中的元素以免破壞文檔的可訪問性。
下面我們來看兩個例子:

例子展示了如何對元素應用彈性布局以及在彈性布局中子元素的行爲

例子2

這個例子適用于桌面浏覽器網頁必須優化以適應于智能手機螢幕的場景。不僅僅需要元素減小尺寸,它們排列的順序方式也必須改變。彈性布局很容易實現這種需求。

更多相關文章
  • CSS3中利用Flexbox實現DIV標簽元素垂直居中
    對于很多的前端我們都不知道Flexbox是什麽用處了,如果你對于Flexbox不了解我們下
  • 在css3中display的屬性也css2是一樣的它可以分類inline和block.如div默認是block,span默認是Inline.可以通過display修改默認的表現方式了,下面來看一些例子.在CSS中,使
  • CSS3中flex-basis屬性用法詳解
    下面我對于flex-basis屬性不了解我們就一起來看看CSS3中flex-basis屬性用法吧,希望例子能幫助到各位哦.WebPlatform1上對flex-basis的解釋是:The flex-basis CSS property describes the initial main size
  • 下面來給各位介紹一個css3中box-sizing屬性用法與它的一些詳細了,希望文章能幫助到各位朋友哦.我們經常會遇到一個父級的div有1px的邊框而且還需要100%的寬度,這個時候在火狐和chrome與一些新的ie
  • CSS3中target實現選項卡切換效果
    選項卡切換使用js還是非常的簡單了,現在有了css就更簡單了,下面我們來看一個CSS3中target實現選項卡切換效果:target是什麽?MDN是這樣描述的::targetThe :target pseudo-class represents the unique element, if any,
  • CSS3中利用Animation steps屬性實現指針時鍾效果
    下面我們一起來看一篇關于CSS3中利用Animation steps屬性實現指針時鍾效果的例子,希望例子對各位有幫助.animation 默認以 ease 方式過渡,它會在每個關鍵幀之間插入補間動畫,所以動畫效果是連貫性的.除了ease, linear.cubic-bezier之類的過渡函數都會爲其
  • 下面小編來爲各位介紹css3中-webkit-animation-fill-mode屬性值爲both時的使用方法,希望本文章對各位朋友帶來幫助.大家都知道 -webkit-animation-fill-mode 屬性
  • CSS3中first-letter實現首字下沉變大
    網頁首字下沉變大只需要使用CSS3中first-letter命令就可以實現了,下面來給各位
一周排行
  • ADSafe淨網大師愛奇藝和優酷廣告無法攔截設置教程
    ADSafe淨網大師是國內首款免費專業淨網軟件,集惡意廣告攔截.用戶隱私保護.不良網站屏蔽 ...
  • 在.net中JSON序列化與反序列化我們可以使用DataContractJsonSerializer類將類型實例序列化等操作,下面我來給大家詳細介紹介紹.對JSON數據進行序列化和反序列化可以使用DataContra
  • jquery對象object循環遍曆其實就是遍曆數組之類的或json數據了,下面我們一起來看一個例子,希望例子能夠幫助到各位朋友.前言一個朋友問對象如何轉爲數組,當我問他爲啥要轉得時候,他告訴我,數組可以用js循環遍
  • jquery validate日期與身份證驗證實例下面是validate的validate.jsjQuery.extend(jQuery.validator.messages, { required: "必 ...
  • PHP有2個時間格式化函數:date()和gmdate(),在官方的文檔中的描述爲date - 格式化一個本地時間/日期gmdate - 格式化一個 GMT/UTC 日期/時間,返回的是格林威治標准時(GMT).舉個 ...
  • Ubuntu WebServer我們從名字上來看就是WEB伺服器了,下面我們來看看在Ubuntu配置WebServer環境的說明了,希望文章能夠給各位帶來有效的幫助.如果安裝源慢(使用國內機器/虛擬機/連接國外網路環
  • 在php中問號運算符可以簡單代替條件運算符了,我們在很多的開發應用中都會碰到一問號運算符的應用,下面我來簡單的給各位新手介紹一下吧.問號逗號運算符語法 代碼如下 $a =1;$b = $a==1 ? 'A' : 'B ...
  • xampp修改mysql默認密碼詳解
    在這裏介紹xampp修改mysql默認密碼的大概過程是先利用xampp的phpmyadmi ...
  • G3502U如何設置短信息服務中心號碼
    G3502U如何設置短信息服務中心號碼,短信息服務中心是用來存儲信息的伺服器,相當于一個信
  • 下面我給各位整理了在UltraEdit編輯器中常用的刪除多余的空格與空行的快捷鍵,希望本文章對你會帶來幫助.UltraEdit刪除多余空格:搜索 >> 替換(Ctrl+R) “查找內容”項輸入兩個空格,“ ...