flex(彈性盒、伸縮盒)
是css中的又一種布局手段，它主要用來代替浮動來完成頁面的布局
flex可以使元素具有彈性，讓元素可以跟隨頁面的大小的改變而改變
要使用彈性盒，必須先將乙個元素設定為彈性容器
我們通過display來設定彈性容器
思維導圖
flex-direction 指定容器中彈性元素的排列方式
主軸：
彈性元素的排列方向稱為主軸
側軸：
與主軸垂直方向的稱為側軸
可選值：
flex-wrap 設定彈性元素是否在彈性容器中自動換行
可選值：
flex-flow 是wrap 和 direction 的簡寫屬性
flex-flow: row wrap;
如何分配主軸上的空白空間（主軸上的元素如何排列）
可選值：
flex-start 元素沿著主軸起邊排列
flex-end 元素沿著主軸終邊排列
center 元素居中排列
space-around 空白分布到元素兩側
space-between 空白均勻分布到元素間
space-evenly 空白分布到元素的單側
normal預設值如何分配輔軸上的空白空間（輔軸空白空間的分布）
可選值：和 justify-content 值一樣
元素在輔軸上如何對齊
元素間的關係
可選值：
stretch預設值，將元素的長度設定為相同的值
flex-start 元素不會拉伸，沿著輔軸起邊對齊
flex-end 沿著輔軸的終邊對齊
center 居中對齊
baseline 基線對齊
元素主軸上如何對齊
元素間的關係
可選值：和 align-items 一樣
用來覆蓋當前彈性元素上的align-items
flex-grow 指定彈性元素的伸展的係數
預設值為 0
例如
ul
flex-shrink 指定彈性元素的收縮係數
預設值為 1
如果為0則表示為原大小，不進行收縮
當父元素中的空間不足以容納所有的子元素時，如果對子元素進行收縮
例如
ul
flex-basis 指定的是元素在主軸上的基礎長度
flex 可以設定彈性元素所有的三個樣式
flex: grow(增長) shrink(縮減) basis(基礎);
給定的一些單個值：
order 決定彈性元素的排列順序
flex彈性盒子
垂直居中 傳統 絕對定位 flex flexible box 彈性盒子。可以輕鬆控制元素的排列，對齊和順序。宣告定義 使用display flex或display inline flex 宣告乙個容器為彈性盒子。這個容器中的子元素們，會遵循彈性布局。注 一般是使用display flex.inlin...
flex彈性盒子
1.設為flex布局之後，子元素的float，clear和vertical align屬性都講失效 2.採用flex布局的元素，稱為flex容器 flex container 所有的子元素成為容器成員，稱為flex專案 flex item 3.容器預設存在兩根軸 水平的主軸和垂直的交叉軸 4.主軸的...
flex彈性盒子
盒子模型 box sizing content box 平時普通盒子模型 padding border 盒子會變大 向外擴充套件 border box 盒子模型 padding border 盒子不會變大 向內擴充套件 calc 公式 注意 屬性相容查詢 calc 100px 20px calc 1...