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-bo月经推迟的原因ttom: 1px solid #eee; display: f赚钱广告lex; 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> 暂时写这两个例子，后面有再补充