移动端flex 经典布局
2017-07-21 16:59
288 查看
<div class="content-wrapper"> <div class="content-list">1</div> <div class="content-list">1</div> <div class="content-list">1</div> </div>
*{
margin: 0;
padding: 0;
}
.content-wrapper{
display: flex;
width: 100%;
height: 40px;
line-height: 40px;
background-color: rgba(0,0,0,0.5);
}
.content-wrapper .content-list{
flex: 1;
text-align: center;
color: #FFFFFF;
}主要内容就是给父容器的display 设置为flex定位,然后子元素设置flex: 1；就可以设置三个相等的div，假如变成了4个div 那么就会分成4等分 在nav标签或者底部菜单 都能很好的应用
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 移动端经典布局之----标题+背景线布局
- 移动端flex布局 微信和UC的兼容性
- 移动端图片画廊 关于flex-box布局
- 移动端Flex 布局新旧混合兼容
- flex.css：移动端 flex 布局神器
- 在移动端中的flex布局
- 移动端弹性布局--flex
- 移动端 css/html (box-flex)自适应、等比布局
- 移动端flex布局
- flex布局兼容性写法，使用于任何移动端安卓苹果
- 饿了么项目开始---css3的flex布局，开发移动端界面
- 移动端布局方式--flex布局
- 移动端开发-webview 不支持css3 flex布局
- 细说移动端 经典的REM布局 与 新秀VW布局
- 从移动端webAPP谈起：flex弹性布局
- html经典布局(适用于移动端)
- 移动端Web页面的CSS3 flex布局快速上手指南
- 移动端 顶部、底部和内容之间的小技巧 用flex布局来解决
- flex.css，移动端flex布局神器，兼容微信，UC，webview等移动端主流浏览器08.10
- Flex布局应用（1）——为什么flex只能做移动端APP开发？