如果乙個盒子display是flex，那麼這個盒子就稱為伸縮容器。
伸縮容器下面的子元素稱為伸縮項。
flex-flow是乙個綜合屬性，它包含了flex-direction、flex-wrap兩個小屬性。
flex-direction：用來調整主軸方向的
row：所有的伸縮項在一行顯示（水平方向顯示，從左至右 預設值）
row-reverse：對齊方式與row相反
column：所有伸縮項在一列顯示（垂直方向 從上至下）
column-reverse：對齊方式與column相反
flex-wrap：用來設定當伸縮項總寬度大於伸縮容器時的顯示方式
預設情況：當伸縮項加起來的總寬度大於伸縮容器的寬度時，對伸縮項（主軸方向是垂直的）進行壓縮。
nowrap：預設值 不會進行壓縮
wrap：當伸縮項加起來的總寬度大於伸縮容器的寬度時，換行顯示。
wrap-reverse：反轉 wrap 排列
justify-content：設定伸縮項在主軸方向上的對齊方式
可選值 flex-start：預設值 按照主軸的起點對齊（注意：flex-start並不總是左對齊，它跟flex-direction有關。）
flex-end：按照主軸的終點對齊
center：在伸縮容器中居中對齊
space-between：當伸縮項的總寬度小於伸縮容器的寬度時，會自動將剩餘的空間進行平分，
平分到每乙個盒子的間距。
space-around：彈性盒子元素會平均地分布在行裡，兩端保留子元素與子元素之間間距大小的一半。
align-items：設定伸縮項在側軸方向的對齊方式
可選值 stretch：拉伸 預設值（注意：如果想要stretch值生效，側軸是垂直方向，那麼高度不能定死；
側軸是水平方向的，那麼寬度不能定死。）
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，
則會向兩個方向溢位相同的長度）。
baseline：確保每個伸縮項的文字基線對齊
align-self：設定伸縮項在側軸上的對齊方式
注意：align-self是在伸縮項上面設定的
align-items和align-self的區別
align-items是在伸縮容器上設定的，針對所有伸縮項進行統一設定；
align-self是在伸縮項上設定的，針對某乙個伸縮項單獨設定。
align-content：設定多行伸縮容器在側軸方向上的對齊方式
可選值：center
space-between
space-around
flex-start
flex-end
stretch
注意：單行時，該屬性無效。
伸縮盒子
order：設定伸縮項的順序
flex：
flex是乙個綜合屬性，它可以分為flex-grow、flex-shrink、flex-basis三個小屬性
flex-grow：拉伸伸縮項以達到充滿整個伸縮容器內容區的目的
注意：flex-grow只是平分伸縮容器剩餘的空間
flex-shrink：將伸縮項進行壓縮以達到剛好可以放入伸縮容器中的目的
flex-basis
當主軸方向為水平方向時，flex-basis等於width屬性
當主軸方向為垂直方向時，flex-basis等於height屬性
當乙個元素同時具備width/height屬性和flex-basis屬性時，width/height屬性會被覆蓋掉
通常我們都會使用flex: 1;這種寫法
flex: 1 == flex-grow: 1
flex-shrink: 1
flex-basis: 1
CSS3彈性伸縮盒子新版本
css3彈性伸縮布局新版本 1.開啟彈性伸縮布局 display flexbox 2.設定布局中元素的排列方式和順序 flex direction 可選的引數 row 水平 column 垂直 row reverse 水平反向 column reverse 垂直反向 3.設定無法容納時,自動換行 f...
深入了解盒子模型
不管是行盒還是快盒，具體由以下幾個結構組成。1 內容盒 content box 主要設定寬，高。2 內邊距 padding 還有一種說法是填充 padding top padding right padding bottom padding left 簡寫 padding。順序是順時針 上右下左 內...
3分鐘帶你了解盒子模型
概念 在html中每乙個元素都是乙個盒子模型 組成 外邊距 邊框 內邊距 內容 注 內容有寬度 width 和高度 height 來控制的 邊框屬性 border width 邊框粗細 border style 邊框線性 border color 邊框顏色 組合寫法 border 2px solid...