成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

flexbox：更加優(yōu)雅的Web布局

mdluo / 2773人閱讀

摘要：它用來(lái)可以處理更加復(fù)雜的布局。在容器下的子元素的寬度和比容器和小的時(shí)候起作用。按照的值減去相應(yīng)大小得到子元素的值。實(shí)例截圖實(shí)例查看用于當(dāng)前行中的子元素進(jìn)行對(duì)齊布局。子元素拉伸至充滿容器。優(yōu)雅的實(shí)現(xiàn)響應(yīng)式布局。

flexbox layout是W3C為了更好的在網(wǎng)頁(yè)中排版和布局而設(shè)計(jì)出來(lái)的一個(gè)模塊。它用來(lái)可以處理更加復(fù)雜的布局。它本質(zhì)是盒模型的延伸，它可以進(jìn)一步去規(guī)范容器中子元素盒模型之間的相對(duì)關(guān)系。

基礎(chǔ)知識(shí)點(diǎn)

flexbox盒子按照寬和高分出了main axis(主軸)和cross axis(和主軸交叉的軸)，盒子的上邊稱為cross start,下邊稱為cross end,左邊稱為main start,右邊稱為main end。

flexbox可以解決什么問(wèn)題 完全置中

在前端中實(shí)現(xiàn)置中是一件很頭疼的事情，尤其是實(shí)現(xiàn)垂直置中，之前在一個(gè)老外的博客上看到一篇實(shí)現(xiàn)置中的七種方法，其中提到一種最簡(jiǎn)單的方法就是使用transform，需要5行代碼可以實(shí)現(xiàn)完全置中。

下面看一下flexbox實(shí)現(xiàn)置中:

css    .flex-container{
        display:flex;
        justify-content: center;
        align-items: center;
    }

flexbox只要3行代碼就可以實(shí)現(xiàn)置中。

等高的卡片式布局

在沒(méi)有用flexbox之前很多卡片設(shè)計(jì)的網(wǎng)站都有這樣一個(gè)問(wèn)題，由于卡片里面的內(nèi)容多少不同，而產(chǎn)生的不等高問(wèn)題。

flexbox簡(jiǎn)單的實(shí)現(xiàn)等高列：

css    .flex-container{
        display:flex;
        align-items: stretch;
    }
flexbox能用在哪里 兼容性


可以看出flexbox從提出到現(xiàn)在也已經(jīng)有了8個(gè)草案。flexbox更新了三種寫法。

caniuse上各個(gè)瀏覽器支持的情況


稍微整理一下(這里借用gitcafe的JaychSu的圖用一下)
從這里可以看出現(xiàn)代瀏覽器都支持最新的那個(gè)版本,只有IE10支持中間那個(gè)版本。

使用css預(yù)處理器定義的@mixin解決flexbox版本兼容

在github上有大神把flexbox三個(gè)版本搞成一個(gè)sass的@mixin,這樣可以在需要的地方直接@include進(jìn)來(lái)就可以輕松解決三個(gè)版本的兼容問(wèn)題。
sass關(guān)于flexbox的mixin的github項(xiàng)目地址

flexbox實(shí)現(xiàn)的原理邏輯 1. display（定義容器里面為flex文檔流）

dislpay:flex使父容器表現(xiàn)為塊盒子

display:inline-flex使容器表現(xiàn)為行盒子

2. flex

flex是flex-grow,flex-shrink,flex-basis的縮寫形式。默認(rèn)值是0 1 auto。

3. flex-basis

flex-basis:flex-basis可以理解為我們給子元素設(shè)置的寬度。默認(rèn)值是auto,寬度設(shè)置為auto時(shí)，盒子的寬度取決你們?cè)氐膶挾取?/p>

4. flex-grow和flex-shrink

grow和shrink是一對(duì)雙胞胎，grow表示伸張因子，shrink表示是收縮因子。

grow在flex容器下的子元素的寬度和比容器和小的時(shí)候起作用。 grow定義了子元素的寬度增長(zhǎng)因子，容器中除去子元素之和剩下的寬度會(huì)按照各個(gè)子元素的gorw值進(jìn)行平分加大各個(gè)子元素上。

公式：

計(jì)算容器還?？臻g

available_space(容器還剩的空間）=container_size(容器寬度)-flex_item_total(子元素寬度之和)

計(jì)算增長(zhǎng)單位

grow_unit(增長(zhǎng)單位)=available_space/flex_grow_total(子元素增長(zhǎng)因子之和)

得到子元素的寬度

flex-item-width(子元素計(jì)算得到的寬度)=flex-basis+grow-unit*flex-grow

上面例子的計(jì)算 
container-size=480px;  flex-item-total=100*3=300px;flex-grow-total=3+2+1=6

available_space=480-300=180px;  

grow_unit=180/6=30px;

子元素1的寬度為：

flex_item_width1=100+3*30=190px;

子元素2的寬度為：

flex_item_width1=100+2*30=160px;

子元素3的寬度為：

flex_item_width1=100+30=130px;


Codepen實(shí)例
shrink則是在寬度和比容器寬度大時(shí)候，才有用。按照shrink的值減去相應(yīng)大小得到子元素的值。

公式：

overflow_space(溢出的寬度)

計(jì)算溢出的寬度

overflow-space=flex-item-total(子元素basis寬度之和)-container_width(容器寬度)

得到計(jì)算的子元素的寬度

item-basis:子元素設(shè)置的flex-basis；item-shrink:子元素的flex-shrink；item-shrink-sum:所有子元素flex_shrink的和。     

flex_item_width(計(jì)算的子元素的寬度)=item-basis --(overflow-space*(item-shrink/item-shrink-sum))  


container-width=480px; item-shrink分別為3，2，1.item-basis=200px;  overflow-space=120px;

則：

flex_item1_width=200-(120*(3/6))=140px;

flex_item2_width=200-(120*(2/6))=160px; 

flex_item3_width=200-(120*(1/6))=180px;

codepen實(shí)例查看

5. align-content 
  
對(duì)單行和單列不起作用，多行時(shí)才有效，需設(shè)置flex-direction:row;flex-wrap:wrap;或者flex-flow:row-wrap,對(duì)flex container中的行進(jìn)行布局排版。

flex-start:行填充到容器的開始。

flex-bottom:行填充到容器的結(jié)束。

center:行居中分布

space-between:行平均分布，第一行在容器開始，最后一行在容器結(jié)束。

space-around:行平均分布，但行與行之間有空隙。

實(shí)例截圖

codepen實(shí)例查看

6. align-items 
  
用于當(dāng)前行中的子元素進(jìn)行對(duì)齊布局。

flex-start: 子元素的上邊緣對(duì)齊到行的上邊緣。

flex-end: 子元素的上邊緣對(duì)齊到行的下邊緣。

center: 以中軸線居中。

baseline: 子元素的基線對(duì)齊。

stretch:子元素拉伸至充滿容器。

實(shí)例截圖


codepen實(shí)例查看

7. align-self 
  
應(yīng)用在子元素上，可以覆蓋align-item來(lái)獲得特殊的元素對(duì)齊。

flex-start: 子元素的上邊緣對(duì)齊到行的上邊緣。

flex-end: 子元素的上邊緣對(duì)齊到行的下邊緣。

center: 以中軸線居中。

baseline: 子元素的基線對(duì)齊。

stretch:子元素拉伸至充滿容器。

實(shí)例截圖

codepen實(shí)例查看

一個(gè)利用align-self來(lái)改變默認(rèn)align-items排版的例子

codepen實(shí)例查看

8. justify-content 
  
水平方向上布局排版

flex-start:子元素靠容器的左邊線對(duì)齊

flex-end:子元素靠容器的右邊線對(duì)齊

center: 子元素居中

space-between: 子元素被平均分布,第一子元素在容器最左邊，最后一個(gè)子元素在最右邊。

space-around: 子元素平均分布，但子元素與子元素之間有空隙。

實(shí)例截圖

codepen實(shí)例查看

9. order 
  
用來(lái)改變子元素之間的排列循序，默認(rèn)值是0，值越小，越往前排。

flexbox解決的一些問(wèn)題。

優(yōu)雅的實(shí)現(xiàn)響應(yīng)式布局。

codepen實(shí)例查看
* 最簡(jiǎn)潔的實(shí)現(xiàn)媒體對(duì)象效果。（不需要浮動(dòng)和創(chuàng)建BFC哦?。?/p>

codepen實(shí)例查看

關(guān)于flexbox的一些文章

Solved by Flexbox

A Complete Guide to Flexbox

Flexbox adventures

原文：http://luxiaojian.me/2015/03/22/flexboxgeng-jia-you-ya-de-webbu-ju/

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111045.html

相關(guān)文章

  • 移動(dòng)端布局與適配

    摘要：實(shí)戰(zhàn)之微信錢包騰訊服務(wù)界面網(wǎng)格布局是讓開發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對(duì)于移動(dòng)端適配，不同的公司不同的團(tuán)隊(duì)有不同的解決方案。柵格系統(tǒng)用于處理頁(yè)面多終端適配的問(wèn)題。 grid實(shí)戰(zhàn)之微信錢包 騰訊服務(wù)界面 CSS3網(wǎng)格布局是讓開發(fā)人員設(shè)計(jì)一個(gè)網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動(dòng)制作一個(gè)網(wǎng)格，實(shí)際上是你將一個(gè)元素聲明為一個(gè)網(wǎng)格容器，并把元素內(nèi)容置于網(wǎng)格中。 移動(dòng)端頁(yè)面適配—...

    Clect 評(píng)論0 收藏0

  • 現(xiàn)代CSS進(jìn)化史

    摘要：第一個(gè)主流的預(yù)處理器是年發(fā)布的，它提供了一個(gè)新的更簡(jiǎn)潔的語(yǔ)法縮進(jìn)代替大括號(hào)，沒(méi)有分號(hào)等等，同時(shí)增加了一些缺失的高級(jí)特性，像變量工具方法還有計(jì)算。 英文：https://medium.com/actualize-...編譯：繆斯 showImg(https://segmentfault.com/img/bV3vCJ?w=1129&h=735); CSS一直被web開發(fā)者認(rèn)為是最簡(jiǎn)單也是最...

    msup 評(píng)論0 收藏0

  • 現(xiàn)代 CSS 進(jìn)化史

    摘要：第一個(gè)主流的預(yù)處理器是年發(fā)布的，它提供了一個(gè)新的更簡(jiǎn)潔的語(yǔ)法縮進(jìn)代替大括號(hào)，沒(méi)有分號(hào)等等，同時(shí)增加了一些缺失的高級(jí)特性，像變量工具方法還有計(jì)算。 showImg(https://segmentfault.com/img/bV5u5I?w=533&h=300); 簡(jiǎn)評(píng)：CSS 是一門入門比較簡(jiǎn)單，但真正使用起來(lái)又很困難的語(yǔ)言（有些人認(rèn)為它不應(yīng)該稱為一門語(yǔ)言）。CSS 看起來(lái)凌亂復(fù)雜，其實(shí)...

    EastWoodYang 評(píng)論0 收藏0

  • CSS及布局

    摘要：經(jīng)過(guò)半年的打磨，正式發(fā)布，主要是新增了一些常用組件，并使用命名，為接下來(lái)的微信小程序開發(fā)做好準(zhǔn)備。這兩種方式實(shí)現(xiàn)的瀑布流式布局均支持首屏和網(wǎng)頁(yè)窗口大小改變時(shí)的列數(shù)自適應(yīng)。主要是對(duì)于標(biāo)準(zhǔn)里的布局方式草案中的布局方式進(jìn)行一些總結(jié)。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看...

    jaysun 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<