彈性容器：當一元素被設定display：flex或display:inline-flex時，這個元素就是彈性容器，而彈性元素則是這個彈性容器中的直接子元素
lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
head
>
>
class
="container"
>
//彈性容器
class
="item"
>
1div
>
//彈性盒子
class
="item"
>
2
class
="item_child"
>
div>
div>
class
="item"
>
3div
>
class
="item"
>
4div
>
div>
body
>
html
>
.container
.item
//container 是彈性容器，而其直接的子元素.item則是彈性元素，但是item中的.item_child則不是彈性元素
主軸和副軸
彈性容器中子元素按照主軸進行排列，主軸預設是水平方向，子元素從左向右依次排列，垂直於主軸的稱為副軸，副軸預設是豎直方向的，預設從上到下。設定彈性容器中主軸與副軸
flex-direction：可以通過設定flex-direction的值來該變彈性容器的主軸
flex-direction的值
作用row
預設值，從左向右排列
row-reverse
元素從左向右排列
column
主軸設為垂直軸，元素從上到下排列
column-reverse
主軸設為垂直軸，軸方向上，元素從下向上排列
設定主軸為column當flex-direction的值分別為row， row-reverse，column，column-reverse時顯示如下.container.item
彈性容器中子元素的排列方式
主軸的排列方式
通過設定justify-content設定彈性容器中元素在主軸中的排列方式justify-content的屬性值有：flex-start：預設值，從主軸的起點開始排列
flex-end：從主軸的終點開始排列
center：居中排列
space-around:每個元素的兩側的間隔相等，元素之間的間隔是元素與容器的間隔的兩倍。
space-between：兩側的緊貼容器，元素之間的間隔相等。
space-evenly：元素之間以及元素和容器的距離都相同。
通過設定align-items設定子元素在副軸上的排列方式stretch：（預設值）子元素未設定高度或者高度為auto，子元素在副軸上進行拉伸，撐滿父元素；center：子元素在副軸上居中排列；
flex-start：子元素在副軸的副軸起點開始排列；
flex-end：子元素在副軸的終點開始排列
baseline: 子元素以專案的第一行文字的基線對齊
通過設定flex-wrap設定彈性容器中元素是否換行（列）排列no-wrap：（預設值）不換行，子元素長度超過主軸時子元素根據比例進行縮小；wrap：當子元素的高或者寬超過父元素時換行；
wrap-reserve：反方向換行。
通過設定align-content設定副軸多行的對齊方式（當副軸未發生換行時此屬性無效）(預設值）：軸線佔滿整個交叉軸。flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
flex-grow屬性
flex-grow:當彈性容器中還有空間為填滿時，子元素的放大比例，預設為0，即不放大；當所有子元素的flex-grow都為相同是，均勻分配，劃分的規則為父元素中剩餘的空間除以所有子元素中的flex-grow的值得和，再乘以本元素的flex-grow的值。flex-shrink屬性flex-shrink:當彈性容器不足以容納所有彈性元素時，彈性元素縮小比例，預設值為1，即空間不足時，彈性元素縮小。縮小的規則為： 子元素超出父元素的長度除以（當前元素的flex-shrink值當前元素的原長度+其他元素的flex-shrink的值原長度)*當前元素的flex-shrink值 。原長度減去上面的值就是元素縮小的值；例子：flex-basis屬性彈性容器長為 200px ,彈性容器中有4個子元素每個元素長100px，第乙個子元素flex-grow值為 0，剩下的均為1；
第乙個元素不進行縮小，剩下的等比例縮小
計算：（1004-200）/(1001+1001+1001) 100 沒個元素縮小的值
結果：元素本身的長 -縮小的值 100 -2/3100 = 33.4.
flex-basis:屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。flex屬性flex:屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選order屬性order:設定元素的排列順序，當元素的order越小排列越前。預設為0；align-selfalign-self:給元素特定的副軸排列方式，與align-item類似，只作用於當前元素。flex布局的使用
記錄一下flex常用的屬性 caniuse.com可以查詢css屬性的相容情況。content box 總寬度 width padding2 margin2 border2 border box 總寬度 width margin2 父級盒子新增 display flex 使用flex布局之後，子元素...
flex布局 Flex布局
摘要 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序 以最佳方式填充可用空間 主要是為了適應所有型別的顯示裝置和螢幕大小 作者 星星 flex 是 flexible box 的縮寫，意為 彈性布局 flex布局主要思想是讓容器有能力讓其子專案能夠改變其寬度 高度 甚至順序...
樣式布局flex的使用
說到頁面布局，無外乎水平垂直，先說說水平，最開始使用最多的是float屬性，但是它有後遺症，塌陷呀清除呀，最後放棄轉戰flex。需要謹記的是，flex是設定在需要生效的元素的父元素上面的。display flex flex direction row column 其中row為水平布局，column...