兼容性先放在這裏:引自 Using Flexbox: Mixing Old and New for the Best Browser Support 、最佳瀏覽器兼容
父元素{
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
子元素{
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
width: 20%; /* For old syntax, otherwise collapses. */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1;
}
支持瀏覽器
如果你將Flexbox多版本混合在一起使用,可以得到以下瀏覽器的支持:
- Chrome any
- Firefox any
- Safari any
- Opera 12.1+
- IE 10+
- iOS any
- Android any
最在的限制當然是IE瀏覽器了,但在其他方面很好。如果你正在做一個特定的移動版本網站,你也會得到更好的支持。如果有誰在window版本手機上測試,麻煩告訴我一下測試結果。
Firefox19有點問題,你需要在觀察一下它。例如,在這個案例中,我無法近死側邊欄爲20%。這個只是摺疊到內容的寬度裏,這樣說或許有點武斷。我需要設置“-moz-box-flex:1”,否則主內容(60%)會伸展到和最寬的段落,就像是段落設置了“white-space:nowrap”,這一點簡直是莫名其妙。
我認爲學習 Flexbox 是件很有趣的事情,因爲他會省去很多你因爲佈局寫的無用的css,例如 float
、clear:both
以及需要用 dsplay:inline-block
的佈局,還會引起其他問題(元素間的4px)。另外 Flexbox 是現代Web佈局的主流方式之一,不會很快就消失。
FlexBox是什麼?
根據規範中的描述可知道,Flexbox模塊提供了一個有效的佈局方式,即使不知道視窗大小或者未知元素情況之下都可以智能的,靈活的調整和分配元素和空間兩者之關的關係。簡單的理解,就是可以自動調整,計算元素在容器空間中的大小。
如何開始使用Flexbox?
首先,簡單的列表(下面的例子都以此列表展開哦)
<ul>
<li></li>
<li></li>
<li></li>
</ul>
ul {
list-style: none;
border: 1px solid green;
}
li {
width: 100px;
height: 100px;
background: #aff;
margin: 5px;
}
ul { /* 聲明父元素爲 `flex` 容器 */
display:flex; /* display:inline-flex; */
}
看到沒有,神奇的像是float:left
一樣,而且不用清除浮動啦。
一、flex 容器屬性: flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content
以下: X -> 水平方向 ; Y -> 垂直方向
flex-direction
flex-direction
屬性控制Flex項目沿着主軸(Main Axis)的排列方向。
/* ul 是一個flex容器 */
ul {
flex-direction: row || column || row-reverse || column-reverse;
}
1、row
:沿X從左向右排列(左 -> 右)
2、column
: 沿Y從上向下排列 (上 -> 下)
3、row-reverse
: 沿X從右向左排列 (右 -> 左)
4、column-reverse
: 沿Y從下向上排列 (下 -> 上)
flex-wrap
ul {
flex-wrap: wrap || nowrap || wrap-reverse;
}
1、 nowrap
(默認值):Flex容器內的Flex項目不換行排列,flex項目寬度自適應
2、 wrap
: Flex容器內的Flex項目達到一定數量時,能換行排列
3、 wrap-reverse
: 它讓Flex項目在容器中多行排列,只是方向是反的
flex-flow
flex-flow
是 flex-direction
和 flex-wrap
兩個屬性的速記屬性。
ul {
flex-flow: row wrap;
}
相當於
ul {
flex-direction: row;
flex-wrap: wrap;
}
justify-content
ul {
justify-content: flex-start || flex-end || center || space-between || space-around;
}
1、 flex-start
(默認值):讓所有Flex項目靠X開始邊緣(左對齊)
2、 flex-end
:讓所有Flex項目靠X結束邊緣(右對齊)
3、 center
:讓所有Flex項目排在X中間(居中對齊)
4、 space-between
:讓除了第一個和最一個Flex項目的兩者間間距相同(兩端對齊)
5、 space-around
:讓每個Flex項目具有相同的空間
align-items
ul {
align-items: flex-start || flex-end || center || stretch || baseline;
}
1、 stretch
(默認值):讓所有的Flex項目高度和Flex容器高度一樣
2、 flex-start
:讓所有Flex項目靠 Y 開始邊緣(頂部對齊)。
3、 flex-end
:讓所有Flex項目靠 Y 結束邊緣(底部對齊)。
4、 center
:讓Flex項目在 Y 中間(居中對齊)。
5、 baseline
:讓所有Flex項目在 Y 上沿着他們自己的基線(每個項目的中間)對齊。
align-content
1、 stretch
(默認值):讓所有的Flex項目高度和Flex容器高度一樣
2、 flex-start
:讓多行Flex項目靠 Y 開始邊緣(頂部對齊)。
3、 flex-end
:讓多行Flex項目靠 Y 結束邊緣(底部對齊)。
4、 center
:讓多行項目在 Y 中間(居中對齊)。
5、 baseline
:讓多行Flex項目在 Y 上沿着他們自己的基線(每個項目的中間)對齊。
二、Flex項目屬性
order || flex-grow || flex-shrink || flex-basis
order
允許Flex項目在一個Flex容器中重新排序。基本上,你可以改變Flex項目的順序,從一個位置移動到另一個地方。
這不會影響源代碼。這也意味着Flex項目的位置在HTML源代碼中不需要改變。order
屬性的默認值是0
。它可以接受一個正值,也可以接受一個負值。
這個時候,三個li
的order
值都是0
,如果想讓 第一個 li
放在後面。
li:nth-child(1){
order : 1 ;
}
flex-grow 和 flex-shrink
flex-grow
和flex-shrink
屬性控制Flex項目在容器有多餘的空間如何放大(擴展),在沒有額外空間又如何縮小。
他們可能接受0
或者大於0
的任何正數。0 || positive number
。
ul {
display:flex;
}
默認情況下,flex-grow
屬性值設置爲0
。表示Flex項目不會增長,填充Flex容器可用空間。取值爲0
就是一個開和關的按鈕。表示flex-grow
開關是關閉的。
li {
flex-grow:1;
}
默認情況下,flex-shrink
的值是1
,也就是說flex-shrink
開關也是打開的。也就是當你拉動瀏覽器窗口的時候,裏面的內容是根據窗口大小變化的。
flex-basis
flex-basis
默認的值是auto
。flex-basis
可以取任何用於width
屬性的任何值。比如% || em || rem || px
等。
注意:如果flex-basis
屬性的值是0
時,也需要使用單位。即flex-basis: 0px
不能寫成flex-basis:0
。
默認情況,Flex
項目的初始寬度由flex-basis
的默認值決定,即:flex-basis: auto
。Flex項目寬度的計算是基於內容的多少來自動計算.
然而,如果你想將Flex項目設置一個固定的寬度,你也可以這樣做:
li {
flex-basis: 150px;
}
flex速記
flex
是flex-grow
、flex-shrink
和flex-basis
三個屬性的速記(簡寫)。
li {
flex: 0 1 auto;
}
相當於
li {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
flex-grow
第一,然後是flex-shrink
,最後是flex-basis
。縮寫成GSB
,可以幫助你更好的記憶。
先更到這,剛剛一半,忙起來,下次繼續學習。
分割線———————————————5.23————————————————————————
<ul>
<li>我是第一個蘋果</li>
<li>我是第二個桃子</li>
</ul>
ul {
display:flex;
}
/* 第一個彈性項目 */
li:nth-child(1) {
flex: 2 1 0; /* 與寫成 flex: 2 相同*/
}
/* 第二個彈性項目 */
li:nth-child(2){
flex: 1 1 0;
background-color: #8cacea;
}
flex-grow
分別爲2
和 1
,所以他們分別佔父元素的2/3
和 1/3
。我是這麼理解的,大家可以看下本文最下面鏈接的文章,其實我沒懂博主的意思,就按我自己的理解記筆記了。
- align-self
如果想改變一個彈性項目沿着側軸的位置,而不影響相鄰的彈性項目
取值 : auto || flex-start || flex-end || center || baseline || stretch
ul {
display: flex;
border: 1px solid red;
padding: 0;
list-style: none;
justify-content: space-between;
align-items: flex-start; /* 影響所有彈性項目 */
min-height: 50%;
background-color: #e8e8e9;
}
li {
width: 100px;
background-color: #8cacea;
margin: 8px;
font-size: 2rem;
}
1、 auto
與父元素的 align-items
值相同
2、 flex-start
:頂部
3、 flex-end
:底部
4、 center
:垂直居中
5、 baseline
:與其他flex子項目基線對齊
6、 stretch
: 垂直拉伸,拉伸與容器高度一樣
- 絕對和相對flex項目
在原博文中其實提到過 絕對和相對flex項目,但是因爲我需要盲目相信,所以就沒往筆記裏寫,在這一小節有一個詳細介紹,筆記都是邊理解邊寫的,哈哈 ,所以比較隨心~~
相對 flex 項目:項目的間距根據內容大小計算
絕對 flex 項目:項目的間距根據 flex
屬性計算,而不是內容
<ul>
<li>在原博文中其實提到過 絕對和相對flex項目,但是因爲我需要盲目相信,所以就沒往筆記裏寫,在這一小節有一個詳細介紹,筆記都是邊理解邊寫的,哈哈 ,所以比較隨心~~</li>
<li>相對 flex 項目:項目的間距根據內容大小計算 </li>
</ul>
ul{
list-style: none;
display: flex;
background: #ff00ff;
}
li{
background: #aff;
margin: 5px;
text-align: center;
flex: auto; /*記住這與 flex: 1 1 auto; --- flex-basis:auto 相同*/
border: 1px solid #5a6cf8;
}
這個就是 flex 的相對項目,由內容撐起來的。
將上面的css改爲
li{
flex:1; /*與 flex: 1 1 0 相同*/
}
這就是flex絕對項目,由 flex 屬性決定 li
的寬度。
Flex項目的初始寬度是零(flex-basis: 0
),並且它們會伸展以適應可用空間。當有兩到多個Flex項目的flex-basis
取值爲0
時,它們會基於 flex-grow
值共享可用空間。
這個之前就討論過了。現在寬度不會基於內容大小而計算,而是基於指定的 flex
屬性值來計算。這樣你就明白了吧。對麼?
絕對Flex項目的寬度只基於 flex 屬性,而相對Flex項目的寬度基於內容大小。
- Auto-margin 對齊
-
當給
li
設置margin:auto
時,是會出問題的。
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
<li>fourth item</li>
</ul>
ul{
list-style: none;
display: flex;
background: #ff00ff;
}
li{
background: #aff;
margin: 5px;
text-align: center;
border: 1px solid #5a6cf8;
}
這些圖的背景顏色實在太醜了,哈哈哈哈哈
li:first-of-type{
margin: auto;
}
li:first-of-type{
margin-right: auto;
}
li:first-of-type{
margin-right: auto;
}
設置 margin 任何一個方向的 auto 之後,justify-content
就不起作用了。
——————又要擱淺了,因爲我要去健身啦,下次接着學習啊,這個flex佈局簡直厲害了——————
————–6/1—==因 爲本人年齡大於14週歲,並且暫時膝下無子女,所以無法過六一兒童節————–
碼農網大神是這麼說的
於是乎我先自己做了個小練習,用不了十分鐘的。
開始今天的學習~~~~
flex 的兼容性問題
上述解決方案地址 解決flexbox跨瀏覽器兼容bug
學習於碼農網FlexBox