1.設為flex布局之後，子元素的float，clear和vertical-align屬性都講失效
2.採用flex布局的元素，稱為flex容器（flex container），所有的子元素成為容器成員，稱為flex專案（flex item）
3.容器預設存在兩根軸：水平的主軸和垂直的交叉軸
4.主軸的開始位置叫做main start，結束位置叫做main end
5.交叉軸的開始位置叫做cross start，結束位置叫做cross end
6.單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size
row（預設值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
nowrap(預設)：不換行
wrap:換行，第一行在上方
wrap-reverse:換行，第一行在下方
flex-start（預設值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，專案之間的間隔都相等。
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。
stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（預設值）：軸線佔滿整個交叉軸。
flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
.item
該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。
stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
針對父級容器的設定
display:flex
flex-wrap:是否換行
flex-direction:子項的排列方向
justify-content:子項在水平方向的排列
align-content:多行子項在水平方向的排列
align-items:統一設定單行子項在水平方向的排列
針對子項的設定
flex:設定子項的比例關係
flex:1
order:設定子項在兄弟間的排列順序
align-self:單獨設定每個子項在垂直方向的排列
flex彈性盒子
垂直居中 傳統 絕對定位 flex flexible box 彈性盒子。可以輕鬆控制元素的排列，對齊和順序。宣告定義 使用display flex或display inline flex 宣告乙個容器為彈性盒子。這個容器中的子元素們，會遵循彈性布局。注 一般是使用display flex.inlin...
彈性盒子 flex
flex 彈性盒 伸縮盒 是css中的又一種布局手段，它主要用來代替浮動來完成頁面的布局 flex可以使元素具有彈性，讓元素可以跟隨頁面的大小的改變而改變 要使用彈性盒，必須先將乙個元素設定為彈性容器 我們通過display來設定彈性容器 思維導圖 flex direction 指定容器中彈性元素的...
flex彈性盒子
盒子模型 box sizing content box 平時普通盒子模型 padding border 盒子會變大 向外擴充套件 border box 盒子模型 padding border 盒子不會變大 向內擴充套件 calc 公式 注意 屬性相容查詢 calc 100px 20px calc 1...