一、理論
display:flex
容器屬性：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content
專案的屬性：order，flex-grow，flex-shrink，flex-basis，flex，align-self
其中專案屬性中的flex是flex-grow, flex-shrink 和 flex-basis的簡寫
flex-grow取值有0，1（定義專案放大比例）： 0表示專案寬度小於容器寬度時不放大，1表示專案寬度小於容器寬度時放大，預設為0
flex-shrink取值有0，1（定義專案縮小比例）： 0表示專案寬度大於容器時突破容器寬度，1表示專案寬度大於容器時不突破容器寬度，預設為1
flex-basis取值方式可以是百分比，也可以是px，如50%，100px
其中flex-grow與flex-shrink的取值只有0，1。如果是其它值我在測試的過程中似乎沒用，並沒有顯示相應的倍數，測試的環境是chome瀏覽器
二、舉例
hello
hello
hello
hello
hello
第三個引數表明其中專案中的280px大於容器中的200px，則第二個引數的0與1設定起作用；如果第三個引數小於200px，則第乙個引數的0與1設定起作用
相當於第三個引數是第乙個與第二個引數是否起作用的開關。
google又讓我感覺到了與baidu不一樣的體驗。搜尋的技術資料更爽：
1、flex 布局教程：語法篇
2、flex 布局教程：例項篇
3、css flex屬性深入理解
4、彈性布局（display:flex;）屬性詳解
5、圖解：css flex 屬性一點也不難
flex布局的屬性
flex布局的核心概念是軸和容器，容器包括外層的父容器和內層的子容器，軸包括主軸 預設水平 和交叉軸 預設垂直 一 開啟flex布局 父容器設定屬性值 display flex 若父容器為行內元素 display inline flex webkit核心的瀏覽器 display webkit fle...
Flex 專案屬性 flex 布局示例
flex屬性 flex屬性是flex grow,flex shrink和flex basis的簡寫，預設值為0 1 auto。後兩個屬性可選。該屬性有兩個快捷值 auto 1 1 auto 和 none 0 0 auto 下面來看看使用專案屬性flex的兩個示例 一 css 1 html 1 bod...
flex布局 Flex布局
摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...