2019年4月3日 CSS3 知识总结

- 多列布局

• column-count:number/auto;分几列？
• column-width:auto/100px; 设置其列宽
  column-gap: ; 设置间隙
  column-rule-width/style/color: ; 设置列之间的分割线

弹性盒布局

• 改变元素的排练方式和布局

• display:flex; 其属性为块级元素， 使子元素从左到右排列，其元素的浮动，清除浮动，vertical-align无效

• display:inline-flex;其属性为行内块元素

• 容器上的属性（给父元素设置）
  ｆｌｅｘ－ｄｉｒｅｃｔｉｏｎ：ｒｏｗ；按从左到右的顺序一行排列
  ｆｌｅｘ－ｄｉｒｅｃｔｉｏｎ：ｒｏｗ－ｒｅｖｅｒｓｅ；右》左　　行
  ｆｌｅｘ－ｄｉｒｅｃｔｉｏｎ：ｃｏｌｕｍｎ；按从上到下的顺序一列排列
  ｆｌｅｘ－ｄｉｒｅｃｔｉｏｎ：ｃｏｌｕｍｎ－ｒｅｖｅｒｓｅ；下》上　列

• . ｊｕｓｔｉｆｙ－ｃｏｎｔｅｎｔ：ｆｌｅｘ－ｓｔａｒｔ；左对齐
  ｊｕｓｔｉｆｙ－ｃｏｎｔｅｎｔ：ｆｌｅｘ－ｅｎｄ；右对齐
  ｊｕｓｔｉｆｙ－ｃｏｎｔｅｎｔ：ｃｅｎｔｅｒ；居中
  ｊｕｓｔｉｆｙ－ｃｏｎｔｅｎｔ：ｓｐａｃｅ－ｂｅｔｗｅｅｎ；左右元素紧挨着边框各元素等距离对齐
  ｊｕｓｔｉｆｙ－ｃｏｎｔｅｎｔ：ｓｐａｃｅ－ａｒｏｕｎｄ；左右不挨边框的等距对齐方式

• ａｌｉｇｎ－ｉｔｅｍｓ：ｆｌｅｘ－ｓｔａｒｔ；靠上
  ａｌｉｇｎ－ｉｔｅｍｓ：ｆｌｅｘ－ｅｎｄ；靠下
  ａｌｉｇｎ－ｉｔｅｍｓ：ｃｅｎｔｅｒ；中间
  ａｌｉｇｎ－ｉｔｅｍｓ：ｂａｓｅｌｉｎｅ；文字基线对齐
  ａｌｉｇｎ－ｓｔｒｅｔｃｈ：将没有设置高度的子元素其高度与父元素一致

换行
ｆｌｅｘ－ｗｒａｐ：ｎｏｗｒａｐ；不换行，项目缩小
ｆｌｅｘ－ｗｒａｐ：ｗｒａｐ；换行，第一行在上面
ｆｌｅｘ－ｗｒａｐ：ｗｒａｐ－ｒｅｖｅｒｓｅ；　换行　，第一行在下面

项目上的属性：给子元素设置
排序　　　　　ｏｒｄｅｒ：０；　值越大，越靠后；值越小，越靠前；
占比　　　　　ｆｌｅｘ－ｇｒｏｗ：１；　分占其对应数值的剩余父元素空间
缩减　　　　　ｆｌｅｘ－ｓｈｒｉｎｋ：１；　值越大缩减的越多