flex和layout移动端布局

 

1、九宫格

     

    样式为：

ul{
display: flex;
flex-wrap: wrap;//超出换行
}
li{
width: 33%;
height: 60px;
display: flex;
justify-content: center;//子元素水平居中   flex-end结尾   flex-start开头
align-items: center;//子元素垂直
}
div{
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;

}

html内容为

<ul>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>

</ul>

2、头部&底部固定，中间区域滚动

 

.container{

       width: 100%;

       height: 100%;

       display: flex;

        flex-direction: column;

      }

      #head{

        font-weight: bolder;

        font-size: 25px;

        height: 50px;

        border-bottom: 1px solid #eee;

        display: flex;

        justify-content: center;

        align-items: center;

      }

      #content{

        flex: 1;

        padding: 20px;

        overflow-y: scroll;

      }

      #btn{

        font-weight: bolder;

        font-size: 20px;

        width: 100%;

        background-color: firebrick;

        padding: 10px 0;

        color: #fff;

        display: flex;

        justify-content: center;

      }

  

<div class="container">

<div id="head">xxx标题</div>

<div id="content">

<p>内容内容内容内容内容内容内容内容容内容内容内容内</p>

<p>内容内容内容内容内容内容内容内容容内容内容内容内</p>

<p>内容内容内容内容内容内容内容内容容内容内容内容内</p>

<p>内容内容内容内容内容内容内容内容容内容内容内容内</p>

<p>内容内容内容内容内容内容内容内容容内容内容内容内</p>

<p>内容内容内容内容内容内容内容内容容内容内容内容内</p>

</div>

<div id="btn">编辑</div>

</div>

暂时写这两个例子，后面有再补充