flex佈局學習筆記:flexbox--持續維護中

兼容性先放在這裏:引自 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,例如 floatclear: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-flowflex-directionflex-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。它可以接受一個正值,也可以接受一個負值。
這裏寫圖片描述
這個時候,三個liorder值都是0,如果想讓 第一個 li放在後面。

li:nth-child(1){
    order : 1 ;
}

這裏寫圖片描述

flex-grow 和 flex-shrink

flex-growflex-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默認的值是autoflex-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速記

flexflex-growflex-shrinkflex-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 分別爲21 ,所以他們分別佔父元素的2/31/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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章