彈性盒子模型詳解

rozbo 發布于2019-08-28 18:27 / 2847人閱讀

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

一、前言

由于W3C在制定彈性盒模型內容有多版草案，在網上瀏覽了很多視頻和文章，版本有新有舊，所以準備寫一篇關于彈性盒模型的文章，一是輔助自己學習，二是幫忙其他前端學習者更容易地彈性盒模型。

二、彈性盒模型歷史

彈性盒模型歷史英文原版或者查看中文翻譯版
另外附上w3c css3-flexbox標準文檔

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

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

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

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

本文將以display:flex;書寫。

三、兼容性

使用兼容性查詢網站Can I Use查詢flex

四、基礎知識

彈性容器（flex container）

彈性子元素（flex item）

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

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

display:flex;為塊級彈性元素display:inline-flex;為行內彈性元素

五、屬性簡介 1.彈性容器屬性（圖中內容關系：屬性－屬性值）

2.彈性子元素屬性

五、屬性詳解

學習方式一（推薦）：css flexbox試驗場

學習方式二：flex屬性指南（先看目錄，直接選擇對應屬性查看即可）

六、使用

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

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

七、后話

以上是本文所有內容，以下是小白我的感慨。

這是本小白（Vagor）第一篇自己原創的文章，希望大神看到多加提點。

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

如對我的文章感興趣，請關注微信公眾號“每日前端”，每天分享一篇優質前端文章。

GPU云服務器云服務器盒子模型比價盒子盒子比價電視盒子

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

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

解剖CSS布局原理

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

李文鵬 2019-08-29 12:28 評論0 收藏0
前端面試題整理

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

wall2flower 2019-08-30 13:58 評論0 收藏0
前端面試題整理

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

YuboonaZhang 2019-08-26 11:48 評論0 收藏0
前端面試題整理

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

LdhAndroid 2019-08-01 18:37 評論0 收藏0