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

資訊專欄INFORMATION COLUMN

談一談flex布局使用中碰到的一些問題

ztyzz / 3321人閱讀

摘要：起因工作以后由于大量使用到了布局而碰到了一些尚不清楚的問題，以及一些有意思的特性，在此寫篇博客記錄一下。三個(gè)值的含義眾所周知，布局所有的屬性有兩種一種作用在彈性容器上，一種作用在彈性項(xiàng)目上，而就是作用在彈性項(xiàng)目上的屬性。

起因

工作以后由于大量使用到了flex布局而碰到了一些尚不清楚的問題，以及一些有意思的特性，在此寫篇博客記錄一下。

flex三個(gè)值的含義

眾所周知，flex布局所有的屬性有兩種：一種作用在彈性容器（Flex container）上，一種作用在彈性項(xiàng)目（Flex item）上，而flex就是作用在彈性項(xiàng)目上的屬性。

flex 是 flex-grow、flex-shrink、flex-basis 三個(gè)值的簡寫，這個(gè)值規(guī)定了彈性項(xiàng)目如何伸長或壓縮以適應(yīng)彈性容器中的可用空間。

flex-grow 定義彈性項(xiàng)目的放大比列，可以接受數(shù)字（小數(shù)也可以），不接受負(fù)值，默認(rèn)值是 0 。這個(gè)值如果為 0 就意味著即使容器內(nèi)還存在剩余空間，彈性項(xiàng)目也不會(huì)放大。

flex-shrink 定義彈性項(xiàng)目的收縮比例，同樣接受數(shù)字（小數(shù)也可以），不接受負(fù)值，默認(rèn)值是 1 。如果一個(gè)彈性項(xiàng)目的 flex-shrink 設(shè)為 0 而其他彈性項(xiàng)目的 flex-shrink 值為 1 ，則當(dāng)彈性容器空間不足時(shí)，該彈性項(xiàng)目不會(huì)被壓縮，而其他的彈性項(xiàng)目會(huì)被等比例壓縮。

flex-basis 定義在分配容器內(nèi)空間之前，彈性項(xiàng)目占據(jù)的主軸空間（不一定是寬度，因?yàn)橹鬏S方向可以是縱向的），默認(rèn)值是 auto 。如果對(duì)彈性項(xiàng)目同時(shí)設(shè)置 flex-basis 和 width ， width 會(huì)被忽略。還要注意當(dāng)主軸是橫向的時(shí)候，如果設(shè)定了 max-width 或 min-width 會(huì)限制彈性項(xiàng)目的寬度。

這里講一下 flex-basis 取值的情況：

指定的數(shù)值，比如以px、em為單位的數(shù)值。

百分?jǐn)?shù)，取百分?jǐn)?shù)的話就是相對(duì)其父彈性容器的寬或高（取決于主軸方向）來計(jì)算，如果包含塊的尺寸未指定（也就是說父元素的尺寸取決于子元素），那么這時(shí)候結(jié)果和 auto 一樣。

auto 值的意思是基于彈性項(xiàng)目的 width 或 height 調(diào)整大小（根據(jù)主軸的橫向或者縱向），如果沒有設(shè)置 width 或 height 則根據(jù)內(nèi)容自適應(yīng)。

設(shè)置flex之后的彈性項(xiàng)目如何計(jì)算寬度

這里給一個(gè)代碼的例子


  
A

  
B

  
C


#content {
  display: flex;
  width: 360px;
}

.box1 {
  width: 100px;
  flex: 1 1 0;
}

.box2 {
  width: 100px;
  flex: 1 1 0;
}

.box3 {
  width: 100px;
  flex: 1 1 0;
}

由于flex-basis的值為 0 ，所以此時(shí)彈性容器的剩余空間為 360px - 0 * 3 = 360px ，由于3個(gè)元素都設(shè)置了 flex-grow: 1 ，所以剩余空間3個(gè)元素所占比例為 1:1:1 ，每個(gè)元素的寬度就是 360px / 3 = 120px 。

如果把代碼改一下呢？

#content {
  display: flex;
  width: 360px;
}

.box1 {
  width: 100px;
  flex: 1 1 0;
}

.box2 {
  width: 100px;
  flex: 1 1 auto;
}

.box3 {
  flex: 1 1 200px;
}

此時(shí)，彈性容器內(nèi)剩余寬度為：360px - 0 - 100px - 200px = 60px，3個(gè)元素所占剩余空間比例同樣是 1:1:1 。那么寬度分別就是：0 + 20px = 20px ，100px + 20px = 120px ，200px + 20px = 220px 。

對(duì)應(yīng)復(fù)雜情況的計(jì)算，這里有一個(gè)回答寫得不錯(cuò)：

flex設(shè)置成1和auto有什么區(qū)別

flex單值、雙值、三值的賦值規(guī)則是怎么樣的

單值情況下：

一個(gè)無單位的數(shù)字：它會(huì)被當(dāng)作 flex-grow 的值，flex-shrink 為 1 ，flex-basis 為 0%。

一個(gè)有效的寬度值：它會(huì)被當(dāng)作 flex-basis 的值，flex-shrink 和 flex-grow 都是 1 。

關(guān)鍵字：比如 auto，none 這兩個(gè)下文會(huì)講。

雙值情況下：

第一個(gè)值必須是無單位的數(shù)字，它會(huì)作為 flex-grow 的值；第二個(gè)值可以是：

一個(gè)無單位的數(shù)字：它會(huì)被當(dāng)作 flex-shrink 的值，而flex-basis 的值就是 0% 。

一個(gè)有效的寬度值：它會(huì)被當(dāng)作 flex-basis 的值，flex-shrink 的取值就是 1 。

三值情況下：

第一個(gè)和第二個(gè)值必須是無單位的數(shù)，分別作為 flex-grow，flex-shrink，flex-basis 的值；第三個(gè)值可以是有效的寬度值，也可以是 auto 。

flex: 0，flex: 1，flex: auto，flex: none，flex: 0%的區(qū)別是什么？

講完了上面的三種賦值方式之后，那么簡寫就變得很容易理解了：

flex: 0 是 flex: 0 1 0% 的簡寫

flex: none 是 flex: 0 0 auto 的簡寫

flex: 1 是 flex: 1 1 0% 的簡寫

flex: auto 是 flex: 1 1 auto 的簡寫

flex: 0% 是 flex: 1 1 0% 的簡寫

小結(jié)一下：以上就是對(duì) flex 這個(gè)屬性取值的梳理，最近一年沒有寫過博客，最近還是要填一下坑的，前端之路且歌且行～

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/114130.html

相關(guān)文章

  • 談一談移動(dòng)端1px的問題

    摘要：今天想寫的問題來自于網(wǎng)易一面的時(shí)候，面試官問我如何在移動(dòng)端的頁面上畫一條的線。上面的結(jié)論我在端谷歌瀏覽器的設(shè)備模擬器里證實(shí)了有效，但是安卓和真機(jī)并沒有試過。 起因 最近一個(gè)月都在準(zhǔn)備校招，所以沒什么時(shí)間寫博客。今天想寫的問題來自于網(wǎng)易一面的時(shí)候，面試官問我如何在移動(dòng)端的頁面上畫一條1px的線。這個(gè)問題我模糊地記得之前看過相關(guān)文章，但是我清楚地記得當(dāng)時(shí)自己腦子一片空白。是的，一面掛了，但...

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

  • 談一談瀏覽器兼容問題

    摘要：瀏覽器兼容問題什么是瀏覽器兼容所謂的瀏覽器兼容性問題，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁面顯示效果不統(tǒng)一的情況。 瀏覽器兼容問題 1、什么是瀏覽器兼容 所謂的瀏覽器兼容性問題，是指因?yàn)椴煌臑g覽器對(duì)同一段代碼有不同的解析，造成頁面顯示效果不統(tǒng)一的情況。 2、瀏覽器兼容產(chǎn)生的原因 因?yàn)椴煌瑸g覽器使用內(nèi)核及所支持的HTML等網(wǎng)頁語言標(biāo)準(zhǔn)不同； 以及用戶客戶端的環(huán)境不同（如...

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

  • CSS Flex 布局：用 Flex 來實(shí)現(xiàn)圣杯布局

    摘要：布局是年提出的，目前已經(jīng)被所有瀏覽器支持，也是我現(xiàn)在布局的首選方案。實(shí)踐用來實(shí)現(xiàn)圣杯布局圣杯布局指的是一種最常見的網(wǎng)站布局。一般情況下，這種布局要求固定高度，固定寬度，自適應(yīng)。 Flex 布局是 W3C 2009年提出的，目前已經(jīng)被所有瀏覽器支持，也是我現(xiàn)在布局的首選方案。Flex 布局使用起來是非常簡單的，本文談一談平時(shí)使用可能需要注意的問題。 align-content 平時(shí)使用 ...

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

  • 我的前端面試日記（一）

    摘要：組件化編碼的一切都是基于組件的。屬性返回目標(biāo)節(jié)點(diǎn)的前一個(gè)兄弟節(jié)點(diǎn)。如果目標(biāo)節(jié)點(diǎn)前面沒有同屬于一個(gè)父節(jié)點(diǎn)的節(jié)點(diǎn)，將返回屬性是一個(gè)只讀屬性。而當(dāng)變量離開環(huán)境時(shí)，則將其標(biāo)記為離開環(huán)境。 第一次寫面試經(jīng)歷，雖然之前有過一些電話面試經(jīng)歷，但相對(duì)而言感覺此次的經(jīng)歷對(duì)自己收獲還是比較大，這里留下面經(jīng)當(dāng)作日記吧！（面試時(shí)間：2018-6-12 下午2:10；時(shí)長：50min；公司：*） 1、說說Rea...

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

  • 我的前端面試日記（一）

    摘要：組件化編碼的一切都是基于組件的。屬性返回目標(biāo)節(jié)點(diǎn)的前一個(gè)兄弟節(jié)點(diǎn)。如果目標(biāo)節(jié)點(diǎn)前面沒有同屬于一個(gè)父節(jié)點(diǎn)的節(jié)點(diǎn)，將返回屬性是一個(gè)只讀屬性。而當(dāng)變量離開環(huán)境時(shí)，則將其標(biāo)記為離開環(huán)境。 第一次寫面試經(jīng)歷，雖然之前有過一些電話面試經(jīng)歷，但相對(duì)而言感覺此次的經(jīng)歷對(duì)自己收獲還是比較大，這里留下面經(jīng)當(dāng)作日記吧！（面試時(shí)間：2018-6-12 下午2:10；時(shí)長：50min；公司：*） 1、說說Rea...

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

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

0條評(píng)論

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