html5--flex布局问题

移动端布局；

移动端布局目前流行的是两种；一种是利用弹性盒模型flex布局，一种是使用rem单位搭配viewport标签使宽度自适应，还需要借助一小段js；才能完美制作出自适应页面；下面记录总结一下，自己这两天的作页面时应用到的属性；

一、Flex布局是什么？

Flex是Flexible Box的缩写，意为”弹性布局”。任何一个盒模型都可以用flex布局。display：flex；一般加给盒模型的父级；

<style>
  .box{
　　　　display:flex;
　　}
</style>
<body>
    <div class="box">
        <div></div>
    </div>
</body>

注意：不仅块元素可以使用display：flex；行内元素也可以；display:inline-flex;flex:1;等比；自动分配剩余空间分为1份；

flex容器的属性（注意一下效果都是给父级加子级实现的效果；）

1.flex-direction

主要设置主轴的方向，元素在父级的排列方式。

flex-direction：row;从左到右排列；加上-reverse反向排列；

flex-direction：column；从上到下排列；

2.flex-wrap 主要设置元素是否折行显示；如果希望控制元素一行或者多行排列，可以使用flex-wrap；

flex项目在flex容器中默认只显示一行。

flex-wrap：nowrap;根据屏幕自动缩放大小；

flex-wrap：wrap；根据每个子item动态布局；

3.flex-basis:80px;设置弹性盒模型的初始长度为80px;可接收数值，auto，initial，inherit

4.justify-content 元素自己在flex容器中的水平方向对齐方式；

flex-start左边靠齐（默认）

flex-end右边靠齐

center居中对齐

space-between：平分空白空间；左右两边靠拢剩下平分；


<style>
    .box{
        width:500px;
        height:500px;
        border:1px solid #000;
        display:flex;
        justify-content:space-between;
    }
    .box div{
        width:60px;
        height:100px;
        border:1px solid #F00;
        
    }
</style>

</head>

<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

space-around：分布在flex容器内，左右两边的空隙是元素与元素间的一般

 
<style>
    .box{
        500px;
        height:500px;
        border:1px solid #000;
        display:flex;
        justify-content:space-around;
    }
    .box div{
        60px;
        height:100px;
        border:1px solid #F00;
        
    }
</style>

</head>

<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>

5.align-items flex项目在容器中的对齐方式；类似与justify-content；只不过它是纵向对齐方式；可以设置容器内所有元；可以与justify-content搭配使用；

接收值为，flex-start，center，flex-end ，stretch（默认拉伸充满flex容器），space-between，space-around；

6.align-self:改变本身的对齐方式;justify-content + align-items改变的是子级的排列方式；
center/flex-start/flex-end7.复合使用；.justify-content + align-items出现的一些效果。代码就不传了，很简单的；（注意属性都是加给父级的）

display:flex; 默认是首行居左的效果
justify-content:center; 首行居中效果；
justify-content：flex-end；首行居右；
align-items:center; 靠左居中效果；
align-items:center;justify-content:center; 上下左右居中效果；
justify-content：center；align-items：flex-end；靠下居中；
justify-content:flex-end;align-itmes:felx-end;右下角；
justify-content：space-between；空白之间；都向左右两边靠拢；
felx-direction:column（改变方向由行改变成列；）;justify-content：space-between；靠左一上一下；
felx-direction：column；justify-content：space-between；justify-content：center；靠中间一上一下；

注意：当主轴方向是row时，align-items的对齐方式是纵向，当主轴方向为column时，align-items对齐方式是水平方向；

二.viewport+rem布局

1.什么是viewport???

viewport浏览器显示网页的实际宽度；成为网页可视区。目前viewPort的值大多数是980px；viewport的对于多屏时代的移动端布局有着极为重要的作用；

2.设置viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。(如果设为0.5的话切图时可以按照原先大小布局，不过有兼容性问题)
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

3.rem是css新增加的一个相对单位（root em，根em）使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML字体根元素。一般给html标签设置字体大小，相对于这个值来计算尺寸大小；

px与rem可以一起搭配使用不过如何选择？

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可。

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

为了更好的适应不同浏览器我们还需要js动态改变根节点字体的大小
<script>
        var doc = document.documentElement;
        alert(doc.clientWidth)
        doc.style.fontSize = doc.clientWidth/320 * 100 + 'px';

        window.onresize = function(){
            doc.style.fontSize = doc.clientWidth/320 * 100 + 'px';
        }
</script>

1.clientWidth是不同屏幕的可视区宽
2.320是设计稿的宽
3.100是根字体大小

三，移动端布局总结！

1.切图时实际像素与视觉有一个1:2的比例；所以需要计算实际尺寸；

2.当切一些图片时，按照设计稿大小切。在HTML中利用background-size进行压缩；

3.移动端盒模型，使用box-sizing:border-box;使盒模型边框放在盒模型内部不占用空间。否则页面会有偏差；

4.移动端一布局一般采用，两头固定中间自适应布局；