flex

1 <header id="header">

    <h1><a href="#"><img src="images2/logo.png"/></a></h1>
<div class="bar">
<a href="#"></a>
<a href="#"></a>
</div>

</header>

 #header{

width: 100%;
height: 2.95rem;
background: #46ae00;
display: -webkit-flex;
-webkit-justify-content: space-between;

}

2 align-items

3 头部固定

    #scroll{
overflow: auto;
position: absolute;
top: 2.95rem;
left: 0;
right: 0;
bottom: 3rem;

}

4 画个圆

.control span{
width: 0.4rem;
height: 0.4rem;
background: #dddddd;
border-radius: 50%;
margin: 0 0.16666666rem;

}

5 flex-direction

    #main {
    display: flex;
    flex-direction:column;  row  row-reverse  column  column-reverse

}

6 底部固定