亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

彈性盒子模型詳解

rozbo / 2909人閱讀

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

一、前言

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

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

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

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

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

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

本文將以display:flex;書寫。

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

四、基礎(chǔ)知識(shí)

彈性容器（flex container）

彈性子元素（flex item）

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

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

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

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

2.彈性子元素屬性

五、屬性詳解

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

學(xué)習(xí)方式二：flex屬性指南（先看目錄，直接選擇對(duì)應(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è)置這一個(gè)屬性即可，它的子元素會(huì)自動(dòng)變成flex items。
給子元素直接添加屬性即可
.flex-item{
  flex:1 1 auto;
  ......
}
七、后話

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

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

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

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

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

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

相關(guān)文章

  • 解剖CSS布局原理

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

    李文鵬 評(píng)論0 收藏0

  • 前端面試題整理

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

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

  • 前端面試題整理

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

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

  • 前端面試題整理

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

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

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

0條評(píng)論

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