box-flex实现三等分布局
2017-08-13 10:30
423 查看
(转载)http://www.cnblogs.com/OrangeManLi/p/4112991.html
前言:
我还是个前端的菜鸟,现在在实习,接触到一些移动web的开发任务,遇到了很多问题,记录一下顺便分享给大家。
问题?
要实现下图的三等分屏幕效果。此页面为手机web页面,要求自适应宽度。
探索:
期初是用的width:33.33%,但是这样很容易出错,因为margin,border和padding不计算在盒子的width中,所以33.33%显然达不到效果,会应为有margin和padding的参合整体的宽度超过了,实际的width:100%;
解决:
(1)css3 box-sizing属性就是控制盒子的宽度计算包括margin ,border,padding
box-sizing:border-box; /*border计算在width中*/
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
(2)使用css3 calc();
width: calc((100% - (margin + padding )* 3 * 2) / 3 );
width: -webkit-calc((100% - (margin + padding )* 3 * 2) / 3 );
width: -moz-calc((100% - (margin + padding )* 3 * 2) / 3 );
(3) CSS3 box-flex 属性
重点来了,这个新特性可能使用的比较少,但感觉很好用所以推荐一下哈。
css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间
<div class="nav">
<div class="nav-li">成就</div>
<div class="nav-li">动态</div>
<div class="nav-li">收藏</div>
</div>
Css:
.nav{
display:inline-block;
/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;
/* W3C */
display:box;
box-orient:horizontal;
}
.nav-li{
height: 40px;
line-height: 40px;
-webkit-box-flex: 1.0;
-moz-box-flex:1.0;
box-flex:1.0;
}
就是这样,按照上面写就可以达到自动均分了啦啦啦。这样写的好处就是,你不管添加几个内容《div》都会是均分的。
前言:
我还是个前端的菜鸟,现在在实习,接触到一些移动web的开发任务,遇到了很多问题,记录一下顺便分享给大家。
问题?
要实现下图的三等分屏幕效果。此页面为手机web页面,要求自适应宽度。
探索:
期初是用的width:33.33%,但是这样很容易出错,因为margin,border和padding不计算在盒子的width中,所以33.33%显然达不到效果,会应为有margin和padding的参合整体的宽度超过了,实际的width:100%;
解决:
(1)css3 box-sizing属性就是控制盒子的宽度计算包括margin ,border,padding
box-sizing:border-box; /*border计算在width中*/
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
(2)使用css3 calc();
width: calc((100% - (margin + padding )* 3 * 2) / 3 );
width: -webkit-calc((100% - (margin + padding )* 3 * 2) / 3 );
width: -moz-calc((100% - (margin + padding )* 3 * 2) / 3 );
(3) CSS3 box-flex 属性
重点来了,这个新特性可能使用的比较少,但感觉很好用所以推荐一下哈。
css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间
<div class="nav">
<div class="nav-li">成就</div>
<div class="nav-li">动态</div>
<div class="nav-li">收藏</div>
</div>
Css:
.nav{
display:inline-block;
/* Firefox */
display:-moz-box;
-moz-box-orient:horizontal;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-orient:horizontal;
/* W3C */
display:box;
box-orient:horizontal;
}
.nav-li{
height: 40px;
line-height: 40px;
-webkit-box-flex: 1.0;
-moz-box-flex:1.0;
box-flex:1.0;
}
就是这样,按照上面写就可以达到自动均分了啦啦啦。这样写的好处就是,你不管添加几个内容《div》都会是均分的。
相关文章推荐
- FlexBoxLayout结合DBFlow实现流式布局
- 使用CSS3中的box-flex功能实现垂直等高、水平均分、比例划分布局
- 弹性布局 display:box(相对等分) 和 display:flex(绝对等分)
- 通过Flex布局实现三等分
- 使用CSS3中的box-flex功能实现垂直等高、水平均分、比例划分布局
- 基于flex弹性布局头尾固定,中间滚动效果实现
- 移动端 css/html (box-flex)自适应、等比布局
- 实现多列等高布局_flex布局
- React Native探索(四)Flexbox布局详解
- Flexbox盒子弹性布局
- React Native 弹性布局FlexBox
- CSS多列布局Multi-column、伸缩布局Flexbox、网格布局Grid详解
- flex布局实现色子
- 【ife】任务十:Flexbox 布局练习
- display:flex和display:box布局浏览器兼容性分析
- React Native系列之flexbox布局详解
- Android可伸缩布局-FlexboxLayout(支持RecyclerView集成)
- css 一列固定一列自适应布局-flex布局实现
- 最全面的水平垂直居中方案与flexbox布局
- React Native 弹性布局FlexBox