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

資訊專欄INFORMATION COLUMN

彈性盒子模型詳解

rozbo / 2855人閱讀

摘要：二彈性盒模型歷史彈性盒模型歷史英文原版或者查看中文翻譯版另外附上標(biāo)準(zhǔn)文檔彈性盒模型在過去幾年間制定了三版草案規(guī)范。給子元素直接添加屬性即可七后話以上是本文所有內(nèi)容，以下是小白我的感慨。

一、前言

由于W3C在制定彈性盒模型內(nèi)容有多版草案，在網(wǎng)上瀏覽了很多視頻和文章，版本有新有舊，所以準(zhǔn)備寫一篇關(guān)于彈性盒模型的文章，一是輔助自己學(xué)習(xí)，二是幫忙其他前端學(xué)習(xí)者更容易地彈性盒模型。

二、彈性盒模型歷史 
彈性盒模型歷史英文原版或者查看中文翻譯版
另外附上w3c css3-flexbox標(biāo)準(zhǔn)文檔

彈性盒模型在過去幾年間W3C制定了三版草案(規(guī)范)。

如果你看到了display:box;或者“box-{*}屬性，那么你看的正是2009年版本的Flexbox。

如果你看到了display:flexbox;或者“flex()函數(shù)，那么你看的正是2011年版本的Flexbox。

如果你看到了display:flex;和flex-{*}屬性，那么你查看的是當(dāng)前（在寫此文時）的規(guī)范。

本文將以display:flex;書寫。

三、兼容性 
使用兼容性查詢網(wǎng)站Can I Use查詢flex

四、基礎(chǔ)知識

彈性容器（flex container）

彈性子元素（flex item）

主軸（彈性子元素沿著主軸方向排列）；側(cè)軸（垂直于主軸方向）

主軸起點(diǎn)(main start);主軸終點(diǎn)(main end);主軸起點(diǎn)(cross start);主軸起點(diǎn)(cross end);

display:flex;為塊級彈性元素display:inline-flex;為行內(nèi)彈性元素

五、屬性簡介 1.彈性容器屬性（圖中內(nèi)容關(guān)系：屬性－屬性值）

2.彈性子元素屬性

五、屬性詳解

學(xué)習(xí)方式一（推薦）：css flexbox試驗(yàn)場

學(xué)習(xí)方式二：flex屬性指南（先看目錄，直接選擇對應(yīng)屬性查看即可）

六、使用 
使用flexbox只需要在父元素上設(shè)置display屬性即可。
.flex-container {
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-direction:row;
  ......
}

如果您想讓它以內(nèi)聯(lián)方式顯示，則
.flex-container {
  display: -webkit-inline-flex; /* Safari */
  display: inline-flex;
  flex-direction:row;
  ......
}
#注意：僅僅需要在父元素上設(shè)置這一個屬性即可，它的子元素會自動變成flex items。
給子元素直接添加屬性即可
.flex-item{
  flex:1 1 auto;
  ......
}
七、后話

以上是本文所有內(nèi)容，以下是小白我的感慨。

這是本小白（Vagor）第一篇自己原創(chuàng)的文章，希望大神看到多加提點(diǎn)。

我之后會努力更新原創(chuàng)文章，并以我自己的風(fēng)格（只留下原創(chuàng)的部分，多引入其他大神文章的精粹內(nèi)容，給讀者更清晰的思路）去展示。

如對我的文章感興趣，請關(guān)注微信公眾號“每日前端”，每天分享一篇優(yōu)質(zhì)前端文章。

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

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

相關(guān)文章

  • 解剖CSS布局原理

    摘要：前言本文將帶你重新認(rèn)識布局，帶你解剖布局原理，前提是你要有基礎(chǔ)本文將解除你在布局方面的疑惑。以下將對布局元素和文檔流進(jìn)行詳細(xì)講解。而且還能保持文檔流，這是其他元素做不到的。 前言 本文將帶你重新認(rèn)識CSS布局，帶你解剖布局原理，前提是你要有基礎(chǔ)！本文將解除你在布局方面的疑惑。認(rèn)識每個布局元素，了解他們的特性，你才知道為什么會是這樣的結(jié)果。本文內(nèi)容純屬個人理解，不代表官方。 此文主要為理...

    李文鵬 評論0 收藏0

  • 前端面試題整理

    摘要：寫在前面本小菜雞開學(xué)其實(shí)已經(jīng)開始了就要面臨找實(shí)習(xí)的壓力了。所以在此開一貼記錄一下搜集的前端面試的問題和自己即將被拷問的問題。而有著固定的大小，高度超過規(guī)定高度就會出現(xiàn)滾動條。實(shí)現(xiàn)頁面加載進(jìn)度條我們可以將一整個頁面大致分為，個區(qū)域。 寫在前面 本小菜雞開學(xué)(其實(shí)已經(jīng)開始了)就要面臨找實(shí)習(xí)的壓力了。所以在此開一貼記錄一下搜集的前端面試的問題和自己即將被拷問的問題= =。悔不該當(dāng)初沒有好好學(xué)...

    wall2flower 評論0 收藏0

  • 前端面試題整理

    摘要：寫在前面本小菜雞開學(xué)其實(shí)已經(jīng)開始了就要面臨找實(shí)習(xí)的壓力了。所以在此開一貼記錄一下搜集的前端面試的問題和自己即將被拷問的問題。而有著固定的大小，高度超過規(guī)定高度就會出現(xiàn)滾動條。實(shí)現(xiàn)頁面加載進(jìn)度條我們可以將一整個頁面大致分為，個區(qū)域。 寫在前面 本小菜雞開學(xué)(其實(shí)已經(jīng)開始了)就要面臨找實(shí)習(xí)的壓力了。所以在此開一貼記錄一下搜集的前端面試的問題和自己即將被拷問的問題= =。悔不該當(dāng)初沒有好好學(xué)...

    YuboonaZhang 評論0 收藏0

  • 前端面試題整理

    摘要：寫在前面本小菜雞開學(xué)其實(shí)已經(jīng)開始了就要面臨找實(shí)習(xí)的壓力了。所以在此開一貼記錄一下搜集的前端面試的問題和自己即將被拷問的問題。而有著固定的大小，高度超過規(guī)定高度就會出現(xiàn)滾動條。實(shí)現(xiàn)頁面加載進(jìn)度條我們可以將一整個頁面大致分為，個區(qū)域。 寫在前面 本小菜雞開學(xué)(其實(shí)已經(jīng)開始了)就要面臨找實(shí)習(xí)的壓力了。所以在此開一貼記錄一下搜集的前端面試的問題和自己即將被拷問的問題= =?；诓辉摦?dāng)初沒有好好學(xué)...

    LdhAndroid 評論0 收藏0

發(fā)表評論

0條評論

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