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