23、flex响应式布局原理
响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。
flex布局
当使用flex布局的时候涉及到两个东西，容器container和项目items
container：父元素为container，通过给父元素container加样式可以改变其内部items的布局
items：container内的子元素为items
让一个元素变成container的方法：让display：flex就可以了
下面给出我整理的在container加的样式来改变内部container的方法
.container{
/*or display：inline—flex(区别跟block和inline-block区别一样)，让一个元素变为flex容器*/
display:flex;
/*改变items的流向*/
flex-direction:row; /*默认的从左到右依次排开*/
flex-direction:row-reverse; /*从右到左依次排开*/
flex-direction:column; /*从上到下依次排开*/
flex-direction:column-reverse; /*从下到上依次排开*/
/*是否折行*/
flex-wrap:nowrap; /*默认是不折行的，弹性排版*/
flex-wrap: wrap; /*折行*/
flex-wrap: wrap; /*从下到上排版，然后折行*/
/*主轴的对齐方式*/
justify-content: flex-start; /*默认样式，从开始的地方开始排，尽量往后靠*/
justify-content: flex-end; /*从最后开始排，尽量往后靠*/
justify-content: center; /*尽量往中间靠*/
justify-content: space-around; /*把空间放到周围*/
justify-content: space-between; /*把空间全部放到中间*/
justify-content: space-evenly; /*把空间平均分*/
/*次轴的对齐方式*/
align-items:stretch; /*默认的样式，默认拉到跟最长的一样长*/
align-items:flex-start;/*都往上顶*/
align-items:flex-end; /*都往下顶*/
/*多行对齐*/
align-content:flex-start; /*都往上顶，把多余的空间放到下面*/
align-content:flex-end; /*都往下顶，把多余的空间放到上面*/
align-content:center; /*把多余的行高放到两边*/
align-content: stretch; /*把多余的空间平均分配*/
align-content: space-between; /*把多余的空间放到两边*/
align-around: space-around; /*把多余的空间放到周围*/
}下面给出items的样式
.item{
/*用order排列*/
order:1; /*可以用order来从小到大排列，默认是0，*/
/*控制item所占的分数*/
flex-grow:1; /*让item的这个值都为相同的时候会平均分配空间*/
/*flex-shrink控制如何变瘦*/
flex-shrink:0; /*当页面缩小到要挤压当前item时，我不缩小，我的兄弟元素先缩小*/
/*控制基本宽度*/
flex-basis:100px;
/*可以用align-self来定制align-items*/
align-self：flex-end;
}由于属性太多我在这里给出常用的几种：
- display: flex
- flex-direction: row | column
- flex-wrap: wrap
- just-content: center I space- between
- align-items: center
