弹性盒布局、多列布局、媒体查询

弹性盒布局、多列布局、媒体查询

1 flexbox布局

1.1 flexbox布局简介

flexbox布局，即伸缩布局盒模型，又叫弹性盒布局，用来提供一个更有的方式制定、调整和分布一个容器里的项目布局，即使它们的大小是未知或动态的。

中心思想：让容器有能力让其子项目能够改变其宽度、高度（甚至顺序）；以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。flexbox容器会使子项目扩展来填充可用空间、或缩小它们，以防止溢出。

1.2 flexbox的声明

1.2.1 display:flex;

给父元素添加声明display:flex;  由于存在兼容性问题，所以需要加上私有前缀。display:flex 声明该容器为伸缩容器，说明该容器内部为弹性盒布局，内部的元素默认全部在主轴方向一行显示，不会换行。

flex布局中，父元素主轴方向默认为水平方向（从左往右），侧轴方向默认为垂直方向（从上往下）。

1.2.2子元素属性

flexbox布局中，给父元素宽、高，定义为弹性盒子，子项目主轴方向给大小值或flex:n;（n代表所占比例），侧轴方向会默认拉伸。

1.2.3 flex-direction 定义主轴方向

伸缩流方向flex-direction，父元素属性，主要用来创建主轴，定义伸缩项目在伸缩容器中的方向。

flex-direction:row/column/row-reverse/column-reverse;  水平 / 垂直 / 水平方向反方向 / 垂直方向反方向

1.2.4 flex-wrap伸缩换行

flex-wrap:wrap;  父元素属性

子项目在主轴方向默认不会换行，若想多行显示子项目，需要手动换行。同时子项目在侧轴方向依旧保持拉伸状态。

1.2.5 flex-flow伸缩流方向与换行

flex-flow:column wrap / column-reverse wrap;

定义伸缩流方向或换行，父元素属性。

flew-flow:flex-direction||flex-wrap；

1.2.6 justify-content主轴对齐方式

justify-content:flex-start / flex-end / center / space-between / space-around; 父元素属性

其中，flex-start为默认属性，伸缩项目向一行的起始位置靠齐；flex-end，伸缩项目向一行的结束位置靠齐；center，伸缩项目向一行的中间位置靠齐；space-between，伸缩项目会平均分布在行里；space-around伸缩项目会平均分布在行里，且两端保留一半的空间。

1.2.7 align-items侧轴对齐方式

align-items:stretch / flex-start / flex-end / center / baseline; 父元素属性

其中stretch为默认属性，拉伸，当不给伸缩项目定义高度时，会默认填充整个容器；flex-start，伸缩项目在侧轴起点位置摆放；flex-end，伸缩项目在侧轴终点位置摆放；center，伸缩项目居中摆放；baseline，侧轴方向子项目以基线对齐，当包裹文字时，盒子基线会发生变化。

1.2.8 align-self子项目定义侧轴对齐方式

子项目属性，align-self，定义子项目的侧轴对齐方式，可以覆盖子项目继承的align-items。

1.2.9 align-content换行后的侧轴对齐方式（堆栈伸缩行）

align-content:stretch / flex-start / flex-end / center / space-between / space-around;

父元素属性，align-content，跟justify-content属性值一样，多一个默认属性值stretch。因为是换行，父元素侧轴上也存在多个元素，与主轴情况类似。

1.2.10 伸缩项目顺序

伸缩项目属性 order ，在flexbox里，写了order的元素，属性值越小越靠前，没写order的默认更小。

oder:1; 在前

oder:2; 在后

2 多列布局

p{columns:20px 4;} 其中20px代表每一列的最小宽度，4代表拥有最多的列数。

columns存在兼容性问题，需要添加私有前缀。

2.1 columns-width

每一列的最小宽度

2.2 columns-count

拥有的最多列数

2.3 columns-gap

每一列之间的间距

2.4 columns-rule

定义列边框 columns:1px solid #ccc;

2.5 columns-span

定义多列布局中子元素的跨列效果，通常用于标题。

只有两个属性值   columns-span:none / all;  不跨列 / 跨所有列

 

3媒体查询

3.1媒体查询简介

许多只能手机都使用了一个比实际屏幕尺寸大很多的虚拟可视区域（布局视口），主要目的就是让页面在智能手机端阅读时，不会因为实际可视区域变形。所以你看到的页面还是普通样式，即一个全局缩小后的页面。为了让智能手机能根据媒体查询匹配对应样式，让页面在智能手机中正常显示，特意添加了一个meta标签。这个标签的主要作用就是让智能手机浏览页面时能进行优化，并且可以自定义界面可视区域的尺寸和缩放级别。

3.2 meta标签定义，可视窗口

理想视口：为了网站在移动端有最理想的浏览和阅读宽度而设定。需要手动添加meta视口标签，一般视口大小都设置为设备大小。

其中，device-width为设备宽度；user-scalable为用户是否可以缩放；initial-scale控制初始缩放比例，1.0表示不可以缩放；maximum-scale为最大缩放比例；minimum-scale为最小缩放比例。

Sublime text中快捷键为 meta:vp

3.3媒体查询

3.3.1媒体查询语法

div{ width:100%;

height:700px;

Background-color:pink;

}

@media screen an (min-width:768px){

div{

background:red;

}

}

@media screen an (min-width:992px){

div{

background:red;

}

}

@media screen an (min-width:1200px){

div{

background:red;

}

}

语法：  @media 设备 and （条件）{

选择器{声明}

}

3.3.2 min-width最小宽度

min-width:number;  当元素宽度大于number时生效。如上述案例，当条件为min-width时，数值顺序必须从小到大，不然会存在覆盖问题。

3.3.3 max-width最大宽度

写法为从大写到小，不然存在覆盖问题。

3.3.4 min-device-width与min-width的区别

device-width指设备宽度，只用于切换不同屏幕宽度；width只要切换元素宽度即可。

3.3.5 通过媒体查询调用不同的样式

3.3.6实现不同宽度下的布局

.box{

            overflow: hidden;

        }

        .box .son1{

            width: 80%;

            height: 200px;

            background: red;

            float: left;

        }

        .box .son2{

            width: 20%;

            height: 200px;

            background: blue;

            float: left;

        }

        @media screen and (max-width:768px){

            .box .son1{

                width: 100%;

            }

            .box .son2{

                display: none;

            }

        }