国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

10分鐘理解CSS3 FlexBox

dongxiawu / 1073人閱讀

摘要:顧名思義,意味著增長,用于控制的尺寸的伸展。與相對的是,用于控制子元素尺寸超過后,對子元素的壓縮。壓縮后的的寬度分別為,所以相比于初始寬度被壓縮掉的寬度分別為,,與的值成反比。

基本介紹 特點

flexbox是一種css display類型,提供一種更簡單高效的布局方式;

flexbox可以對元素相對于父元素、兄弟元素進行定位、控制尺寸、控制間距;

flexbox對響應式有很好的支持;

工作原理

設置父元素的display屬性為flex,則子元素都變成flex item,由此可以控制子元素的排列方式、尺寸、間距等;

兼容性

Flex Container

先來看一個最簡單的flex示例,外層div設置display: flex成為一個flex container,內部的3個div則自動變為flex item:

html:

css:

.flex-container{ max-width: 960px; margin: 0 auto; display:flex; }
.box{ height: 100px; min-width: 100px; }
.one{ background: pink; }
.two{ background: lightgreen; }
.three{ background: skyblue; }

效果:

效果與浮動布局類似,但是如果用浮動實現的話需要寫更多的代碼,而flex一行就搞定了。

1. Justify Content

如果我們想讓flex item居中排列呢,我們可以給flex container增加一個css屬性:justify-content,它控制flex item在主軸方向(main axis,由flex-drection決定,默認為水平方向)上的對齊方式:

.flex-container{
  ...
  justify-content: center;
}

效果如圖:

除此之外justify-content還可以設置為flex-start, flex-end, space-around, space-between, space-even等值,具體效果請自行實驗。

2. Align Items

實現了flex方向的居中后,垂直于主軸方向(cross axis)的居中可以用align-items實現。

css:

.flex-container{
  max-width: 960px;
  margin: 0 auto;
  display:flex;
  justify-content: center;
  height: 200px;
  background-color: white;
  align-items: center;
}

效果:

使用flex解決了以往css垂直居中實現復雜的問題!相應的,align-items還有flex-start, flex-end等其他值。

3. Flex Direction

flex-direction決定了主軸方向即flex item排列方向,除了默認的row方向之外,還可以縱向、反向(row-reverse/column-reverse)排列flex item:

css:

.flex-container{
  ...
  
  flex-direction: column;
  align-items: center;
}

效果:

4. Flex Wrap

如果我們不想在窗口變窄的情況下壓縮flex item,而是讓超出邊界的flex item換行顯示那我們可以設置flex container的flex-wrap

.flex-container{
  max-width: 960px;
  margin: 0 auto;
  display:flex;
  flex-wrap: wrap;
}

.box{
  height: 100px;
  min-width: 300px;
  flex-grow: 1;
}

當我們壓縮窗口的時候,效果如下:

flex wrap還有一個值:wrap-reverse,設置該值后,被wrap的元素會排到其他元素上面:

由此可見,flex wrap一定程度上可以取代media query了。

5. Flex Row

最后,flex-directionflex-wrap可以合并為一個屬性flex-flow,比如:flex-flow: row-reverse wrap

Flex Item 1. Flex Grow

在上面所有的例子中,三個flex item只占據了flex container小部分空間,如果想讓flex item占滿flex container我們需要給flex item設置flex-grow屬性。顧名思義,grow意味著增長,用于控制flex item的尺寸的伸展。

將css修改為:

.box { 
    height: 100px; 
    min-width: 100px; 
    flex-grow:1; 
}

效果:

可以看到三個子元素平分了父元素的空間,因為此時它們的flex-grow都是1。如果只有一個子元素設置了flex-grow呢?

css:

.box{ height: 100px; min-width: 100px; }
.one{ background: pink; flex-grow: 1; }

效果:

此時two和three的大小不變,而one占據了父元素剩余空間。

如果將one的flex-grow改為2,而two和three改為1,我們看看會發生什么:

css:

.box{ height: 100px; min-width: 100px; flex-grow:1; }
.one{ background: pink; flex-grow: 2; }

效果:

可以看到one的寬度變成了two和three的兩倍,因此flex item的尺寸和flex-grow的值成正比。

2. Flex Shrink

flex-grow相對的是flex-shrinkflex-shrink用于控制子元素尺寸超過flex container后,對子元素的壓縮。請看示例:

修改box的寬度為flex container的1/3,one、two、three的flex-shrink分別為1,2,3:

.box{ height: 100px; width: 320px; }
.one{ background: pink; flex-shrink: 1; }
.two{ background: lightgreen; flex-shrink: 2; }
.three{ background: skyblue; flex-shrink: 3; }

當窗口正常尺寸時,效果如下:

當我們壓縮窗口使其變得更窄后,效果如下:

當flex container寬度變為540px后,子元素都被不同程度的壓縮了。壓縮后的one、two、three的寬度分別為250px、180px、110px,所以相比于初始寬度320px被壓縮掉的寬度分別為70px、140px、210px,70 : 140 : 210 = 1 : 2 : 3,與flex shrink的值成反比。實際上壓縮率和flex item的初始尺寸也有關系,只不過當初始尺寸一樣時它帶來的影響被忽略了。

假設flex shrink為fs,flex item的初始尺寸為is,flex item被壓縮的尺寸為ss,則正確的表達式為:

fs ∝ is/ss
3. Flex Basis

flex-basis用于設置flex item的初始寬/高。為什么有width和height還需要重新加一個flex-basis呢?flex-basis和width/height有如下的區別:

flex-basis只能用于flex-item,而width/height可以應用于其他類型的元素;

flex-basis和flex-direction有關,當flex-direction為row的時,flex-basis設置的是寬度,當flex-direction為column時,flex-basis設置的是高度;

當flex item被絕對定位后(absolute position),flex-basis不起作用,而width/height可以;

flex-basis可以用于flex的簡寫形式,如:flex: 1 0 200px;

我們來看一下flex-basis的作用,將css修改如下:

.box{
  height: 100px;
  flex-grow: 1;
}
.one{
  background: pink;
  flex-basis: 100px;
}
.two{
  background: lightgreen;
  flex-basis: 200px;
}
.three{
  background: skyblue;
  flex-basis: 300px;
}

3個flex item都在原來的初始寬度基礎上增加了相同的寬度:

當然,這個例子如果換成使用width也是一樣的效果,但是雖然效果一樣但意義不一樣,所以使用flex布局時還是應該盡量遵守規范,選合適的人去干正確的事。

4. Order

通過order屬性我們可以改變flex item的排列順序,例如:

html:

1
2
3
4

css:

#blocks{
  display: flex;
  margin: 10px;
  justify-content: space-between;
}

#blocks div{
  flex: 0 0 100px;
  padding: 40px 0;
  text-align: center;
  background: #ccc;
}

默認排列順序是按照flex item在html中的出現順序:

當我們修改flex item的order值后,flex item會按照order值升序排列:

css:

.one{ order: 4; }
.two{ order: 3; }
.three{ order: 2; }
.four{ order: 1; }

效果:

結語

flex就先簡單介紹到這里,flex很強大也很簡單,希望大家用的開心。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/53431.html

相關文章

  • 前端-CSS3&H5

    摘要:高度模型淺識為的簡寫,簡稱為塊級格式化上下文,為瀏覽器渲染某一區域的機制,中只有和中還增加了和。并非所有的布局都會在開發中使用,但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題:怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候,看到 float 屬性不...

    xiaolinbang 評論0 收藏0
  • 10分鐘理解CSS3 Grid

    摘要:當然使用要注意語法嚴謹,像這種寫法是無法解析的,用名稱模擬出的結構在二維空間上必須是一個整體,因為每個也是無法分割的。 基本介紹 上一篇文章我們介紹了 css3 flexbox,今天我們再來說說css3的另外一個強大的功能:Grid。Grid做前端的同學應該都很熟悉了,翻譯成中文為柵格,用過bootstrap、semantic ui、ant design的同學肯定都了解grid lay...

    simon_chen 評論0 收藏0
  • CSS及布局

    摘要:經過半年的打磨,正式發布,主要是新增了一些常用組件,并使用命名,為接下來的微信小程序開發做好準備。這兩種方式實現的瀑布流式布局均支持首屏和網頁窗口大小改變時的列數自適應。主要是對于標準里的布局方式草案中的布局方式進行一些總結。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題:怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候,看...

    jaysun 評論0 收藏0
  • 移動端布局與適配

    摘要:實戰之微信錢包騰訊服務界面網格布局是讓開發人員設計一個網格并將內容放在這些網格內。對于移動端適配,不同的公司不同的團隊有不同的解決方案。柵格系統用于處理頁面多終端適配的問題。 grid實戰之微信錢包 騰訊服務界面 CSS3網格布局是讓開發人員設計一個網格并將內容放在這些網格內。而不是使用浮動制作一個網格,實際上是你將一個元素聲明為一個網格容器,并把元素內容置于網格中。 移動端頁面適配—...

    Clect 評論0 收藏0

發表評論

0條評論

dongxiawu

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<