“妄”眼欲穿-CSS之flex佈局和邊框陰影
妄：狂妄；不會的東西只有懷着一顆狂妄的心，假裝能把它看穿吧。
flex佈局
main axis：主軸；cross axis：交叉軸
容器的子元素自動成爲容器成員，成爲flex 項目（item）
flex容器屬性
flex-direction
該屬性決定主軸的方向，即各flex item 的排列方向。
-
row（默認值）：水平方向，起點在左端；
-
row-reverse：水平方向，起點在右端；
-
column：垂直方向，起點在上沿；
-
column-reverse：垂直方向，起點在下沿。
flex-wrap
該屬性決定在軸線方向排不下所有的item時的換行規則。
- nowrap（默認值）：不換行；
- wrap：換行，第一行在上方；
- wrap-reverse：換行，第一行在下方。
flex-flow
該屬性是flex-direction屬性和flex-wrap屬性的簡寫形式。
- 默認值：
row nowrap； - 屬性格式：
.box { flex-flow：<flex-direction>||<flex-wrap>；}
justify-content
該屬性定義了item在主軸上的對齊方式。
- flex-start（默認值）：左對齊；
- flex-end：右對齊；
- center：居中；
- space-between：兩端對齊，item之間的間隔都相等；
- space-around：item兩側的間隔都相等，所以，項目之間的間隔比項目與邊框的間隔大一倍。
align-items
該屬性定義項目在交叉軸（cross axis）方向上如何對齊。
- flex-start：item的上邊框與交叉軸的起點對齊；
- flex-end：item的下邊框與交叉軸的終點對齊；
- center：item的中線與交叉軸的中點對齊；
- baseline：item的第一行文字的基線對齊（文字的底線）；
- stretch（默認值）：如果item未設置高度或設爲auto，將佔滿整個容器的高度。
align-content
該屬性定義了多條軸線的對齊方式。如果item中只有一條軸線，該屬性不起作用。
- flex-start：與交叉軸的起點對齊；
- flex-end：與交叉軸的終點對齊
- center：與交叉軸的中點對齊。
- space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
- space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
- stretch（默認值）：軸線佔滿整個交叉軸。
item項目屬性
order
該屬性決定item的排列順序，數值越小，排列越靠前，默認爲0。
flex-grow
該屬性決定item的放大比例，默認爲0，即如果存在剩餘空間，也不放大。類似Android權重（weight）
flex-shrink
該屬性決定了item的縮小比例，默認爲1，即如果空間不足，item將縮小。負值對該屬性無效
flex-basis
該屬性決定了在分配多餘空間之前，item佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。默認值auto，即item的原本大小。
該屬性可以設爲width或height屬性一樣的值（如：35px），則item將佔據固定空間。
flex
該屬性是flex-grow，flex-shrink，flex-basis的簡寫。默認值爲0 1 auto。後兩個屬性可選。
該屬性有兩個快捷值：auto：1 1 auto；none：0 0 auto；建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因爲瀏覽器會推算相關值。
align-self
該屬性允許單個item有與其他item不一樣的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同與stretch。
該屬性可能取6個值，除了auto，其他都和align-items屬性完全一致。
邊框陰影
box-shadow
box-shadow: <length> <length> <length>?<length>?||<color>
也就是
box-shadow:inset x-offset y-offset blur-radius spread-radius color
換句說:box-shadow:投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴展半徑 陰影顏色
- 投影方式：該參數爲可選值，不設值時表示默認的投影方式爲外陰影，如果取其唯一值
insert，則表示投影方式爲內陰影。 - x-offset（x軸偏移量）：指陰影水平偏移量，可以取正值或負值，若值爲正，則陰影在對象的右邊，反之在對象的左邊。
- y-offset（y軸偏移量）：指陰影的垂直偏移量，可取正值或負值，若爲正值，則陰影在對象的底部，反之在對象的頂部。
- blur-radius（陰影模糊半徑）：可選，但取值只能爲正值，值取0時，表示陰影不具有模糊效果。值越大，陰影的邊緣就越模糊。
- spread-radius（陰影拓展半徑）：可選，取值可以爲正值或負值。若爲正值，則整個陰影都延展擴大，反之縮小。
- color（陰影顏色）：可選，當不設定顏色時，瀏覽器會取默認色，但各瀏覽器的默認色不一樣，特別是在webkit內核下的safari和chrome瀏覽器將無色，也就是透明，建議不要省略此參數。
圓角邊框
border-radius（css3)
border是一個簡寫屬性，用於設置四個border-*-radius屬性。
語法：border-radius: 1-4 length|% / 1-4 length|%;
按此順序設置每個 radii 的四個值。如果省略 bottom-left，則與 top-right 相同。如果省略 bottom-right，則與 top-left 相同。如果省略 top-right，則與 top-left 相同。