媒体查询、多列和弹性盒子布局方式

1、column-count：分栏的个数

2、column-width：分栏的宽度

3、column-gap：分栏的间距

4、column-rule：分栏的边框

5、column-span：all/none  设置或检索对象元素是否横跨所有列。

6、column-fill设置或检索对象所有列的高度是否统一（目前大部分浏览器尚未支持） auto：列高度自适应内容/    balance：所有列的高度以其中最高的一列统一(默认值)

7、break-inside:avoid避免中断【见瀑布流图片】

四、媒体查询

@media【and后面一定要有空格】 screen  and  (min-width:320px)  and (max-width:750px){

  body { background-color:blue;}

 }

screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型【默认是all】

and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)

(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。

引入样式格式 <link rel=“stylesheet” type=“text/css” media=“screen and  (orientation:portrait)”    href=style.css>

1. 容器默认存在两根轴：横轴和纵轴

2. 采用flex布局的元素，称为flex容器，简称”容器”。它的所有子元素称为flex项目

3. 要设为flex布局，必须先设置display:flex多列