彈性盒

• 含義
• 彈性盒是css3引入的一種新的布局方式，只對子元素起作用，只影響子元素的排列方式
• 名稱
• 容器：父元素
• 項目：子元素
• 彈性盒的特點
• 當父元素變成彈性盒后，子元素默認橫向顯示
• 當父元素變成彈性盒后，子元素能夠設置寬度和高度
• 當父元素變成彈性盒后，如果只有一個子元素，實現(xiàn)水平垂直居中可以給子元素添加margin:auto;
• 注意：
• 實現(xiàn)下面的容器屬性和項目屬性的前提是父元素必須display:flex;

容器屬性

• flex-direction 調整主軸方向
• row 默認值，規(guī)定主軸方向為橫向
• column 規(guī)定主軸方向為縱向
• row-reverse 規(guī)定主軸方向為橫向，項目反向排列
• column-reverse 規(guī)定主軸方向為縱向，項目反向排列
• justify-content 調整項目在橫軸的對齊方式
• flex-start 橫軸的開始位置對齊，沒有間距
• flex-end 橫軸的結束位置對齊，沒有間距
• center 橫軸的中間位置對齊，沒有間距
• space-between 橫軸的兩端對齊，兩端無間距，中間間距平均分配
• space-around 橫軸的間距環(huán)繞，兩端間距是中間的一半
• space-evenly 橫軸的間距環(huán)繞，間距一致
• align-items 調整項目在縱軸的對齊方式
• flex-start 縱軸的開始位置
• flex-end 縱軸的結束位置
• center 縱軸的中間位置
• stretch 拉伸，子元素不設高度有效