弹性盒子display:box

yanwei 发布于2019-08-29 10:58 / 3192人阅读

摘要：在做手机页面开发中，一直使用弹性盒子布局，这种布局简单快速，且在手机端已经不用担心兼容性问题，和还是有一定差异性，本篇文章只讲解。父容器上设置属性在父容器上设置内核的浏览器，必须加上前缀。

在做手机页面开发中，一直使用弹性盒子布局，这种布局简单快速，且在手机端已经不用担心兼容性问题，

display:box和display:flex还是有一定差异性，本篇文章只讲解box。

父容器上设置box属性

在父容器上设置
display: box;
Webkit内核的浏览器，必须加上-webkit前缀。
display: -webkit-box;
默认情况下,子容器会从左到右水平排列

box-orient: vertical;
设置该属性可以使子容器从上到下垂直排列

box-direction: reverse;
子容器在水平方向从右向左(就是说最右边的元素排在最左边),垂直方向从下向上(最下面的在最上面)

box-align: start | end | center | stretch
父容器水平排列下 start:上,center:中,end:下,stretch:子容器不设置高度或高度为auto时,子容器会拉伸的和父容器一样高,设置高度同start
父容器垂直排列下 start:左,center:中,end:右,stretch:子容器不设置宽度或宽度为auto时,子容器会拉伸的和父容器一样宽,设置宽度同start

box-pack: start | end | center | justify
父容器水平排列下 start:左,center:中,end:右,justify:水平等分父容器宽度
父容器垂直排列下 start:上,center:中,end:下,justify:水平等分父容器高度

子容器上设置box-flex属性

box-flex: 1;
定义子容器占的比例, 具体计算规则,父容器-定宽,剩余的按比例等分。
但实际计算中并没有实现等分(子容器中还有元素时),常用的解决方法是,
添加宽度百分比和box-sizing: border-box;（解决border和padding问题）
.bf-2{
    box-sizing: border-box;
    -webkit-box-flex: 2;
    width: 2%;
}
.bf-1{
    box-sizing: border-box;
    -webkit-box-flex: 1;
    width: 1%;
}
这样可以实现bf-2是bf-1的2倍
不建议width是一个数值和box-flex一起使用

具体例子

html


    1
    2
    3

css

.box {
        margin: 50px auto;
        width: 300px;
        height: 200px;
        border: 1px solid #dd5555;

        /* 伸缩盒子 */
        display: box;
        display: -webkit-box;
        /* 垂直排列 */
        /*box-orient: vertical;*/
        /*-webkit-box-orient: vertical;*/
        /* 相反方向 */
        /*!*box-direction: reverse;*/
        /*-webkit-box-direction: reverse;*/

        /*-webkit-box-align: stretch;*/

        /*-webkit-box-pack: center*/
    }
    .item1 {
        background-color: #ffffd;
        -webkit-box-flex: 1;
        box-sizing: border-box;
        width: 1%;
    }
    .item2 {
        background-color: #44DDDD;
        height: 40px;
        width: 120px;
    }
    .item3 {
        background-color: #0482ca;
        height: 50px;
        -webkit-box-flex: 2;
        width: 2%;
        box-sizing: border-box;
        border: 1px solid #ffffd;
    }

GPU云服务器云服务器比价盒子盒子比价电视盒子阿里盒子

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111340.html

弹性盒子模型详解

摘要：二弹性盒模型历史弹性盒模型历史英文原版或者查看中文翻译版另外附上标准文档弹性盒模型在过去几年间制定了三版草案规范。给子元素直接添加属性即可七后话以上是本文所有内容，以下是小白我的感慨。一、前言由于W3C在制定弹性盒模型内容有多版草案，在网上浏览了很多视频和文章，版本有新有旧，所以准备写一篇关于弹性盒模型的文章，一是辅助自己学习，二是帮忙其他前端学习者更容易地弹性盒模型。二、弹性盒...

rozbo 2019-08-28 18:27 评论0 收藏0
弹性布局flex 兼容写法

摘要：设置在弹性项目上的属性属性定义项目的排列顺序。属性定义了项目的缩小比例，默认为，即如果空间不足，该项目将缩小。属性允许单个项目有与其他项目不一样的对齐方式，可覆盖属性。兼容浏览器版本 Chrome 21+ Opera 12.1+ Firefox 22+ Safari 6.1+ IE 10+ 浏览器对最新flexbox规范的支持情况： Chrome 29+ Firefox 28+...

shiweifu 2019-08-30 11:21 评论0 收藏0
Flex Box 简单弹性布局

摘要：弹性盒子模型有两种规范早起的和后期的。它可以轻易的实现均分浮动居中等灵活布局，在移动端只考虑内核时很实用。一固定宽度占满剩余宽度垂直方向对齐方式水平方向对齐方式二固定宽度剩余空间的剩余空间的水平方向对齐方式垂直方向对齐方式　　弹性盒子模型有两种规范：早起的display:box 和后期的display:flex。它可以轻易的实现均分、浮动、居中等灵活布局，在移动端只考虑webkit内核时很实...

ixlei 2019-04-23 13:33 评论0 收藏0
CSS_Flex

摘要：的属性采用布局的元素，称为容器，简称容器它的所有子元素自动成为容器成员，称之为项目简称项目容器默认存在两根轴水平主轴和垂直的交叉轴。子项在容器的当前行侧轴纵轴方向上的对齐方式对影响与交叉点的起点对齐。负值对该属性无效。 CSS3 弹性盒子(Flexible Box 或 Flexbox)，弹性框布局，它具有定义一个可伸缩项目的能力。flex元素可以根据flex-grow因子拉伸以填充可用...

james 2019-08-30 13:19 评论0 收藏0
移动端 h5开发相关内容总结(三)

摘要：就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。标签的属性应当与相关元素的属性相同。所以在和移动我分别用了两种方案，传统布局实现，弹性盒实现。前者是控制弹性盒的内容垂直方向居中，后者控制内容水平方向居中。之前写过两篇开发中遇到的问题和解决方案。当时是CSS 和 JavaScript 分开写的。现在写这篇文章的时候感觉很多内容都是有内在联系的，所以不好分开。...

cnTomato 2019-08-19 17:33 评论0 收藏0