flex和layout移动端布局
Posted liruting
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
暂时写这两个例子，后面有再补充
以上是关于flex和layout移动端布局的主要内容，如果未能解决你的问题，请参考以下文章