弹性盒模型(box)
博客专区 > LorinLuo 的博客 > 博客详情
弹性盒模型(box)
LorinLuo 发表于2年前
弹性盒模型(box)
  • 发表于 2年前
  • 阅读 43
  • 收藏 2
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
     /*--box模型需要加浏览器前缀需要加前缀--*/
div.box {
        width: 300px;
        height: 300px;
        border: 1px solid gray;
        margin: 0 auto;

        display: -webkit-box; /*--display: box 让容器成为弹盒--*/
display: -moz-box;
        display: -o-box;
        display: -ms-box;
        display: box;

        -webkit-box-orient: horizontal; /*--设置弹盒子元素的排列方式(vertical/horizontal)--*/
-moz-box-orient: horizontal;
        -o-box-orient: horizontal;
        -ms-box-orient: horizontal;

        -webkit-box-direction: normal; /*--设置弹盒子元素是否倒序排列--(normal/reverse)*/
-moz-box-direction: normal;
        -o-box-direction: normal;
        -ms-box-direction: normal;

        -webkit-box-pack: start; /*--设置弹盒子元素的对齐方式(start/center/end/justify),box-align反方向,box-orient同方向--*/
-moz-box-pack: start;
        -o-box-pack: start;
        -ms-box-pack: start;

        -webkit-box-align: baseline; /*--设置弹盒子元素的对齐方式(start/center/end/baseline/stretch),box-pack反方向,box-orient反方向--*/
-moz-box-align: start;
        -o-box-align: start;
        -ms-box-align: start;

        -webkit-box-lines: multiple; /*--设置弹盒的元素是否可以换行显示(single/multiple),浏览器还没实现该属性的效果--*/
-moz-box-lines: multiple;
        -o-box-lines: multiple;
        -ms-box-lines: multiple;
     }
     div.box-item-1 {
        background-color: green;

        -webkit-box-flex: 1; --设置或检索弹性盒模型对象的子元素如何分配其剩余空间(Integer)--
        -moz-box-flex: 1;
        -o-box-flex: 1;
        -ms-box-flex: 1;

        -webkit-box-flex-group: 1; /*--数值较大的组分配的空间为所占的实际空间,剩余空间分配给数值最小的那个组--*/
-moz-box-flex-group: 2;
        -o-box-flex-group: 2;
        -ms-box-flex-group: 2;

        -webkit-box-ordinal-group: 3; --设置弹盒子元素的顺序(值越大越靠后排列)--
        -moz-box-ordinal-group: 3;
        -o-box-ordinal-group: 3;
        -ms-box-ordinal-group: 3;
     }
     div.box-item-2 {
        background-color: pink;

        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -o-box-flex: 1;
        -ms-box-flex: 1;

        -webkit-box-flex-group: 2;
        -moz-box-flex-group: 2;
        -o-box-flex-group: 2;
        -ms-box-flex-group: 2;

        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        -o-box-ordinal-group: 2;
        -ms-box-ordinal-group: 2;
     }
     div.box-item-3 {
        background-color: plum;

        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -o-box-flex: 1;
        -ms-box-flex: 1;

        -webkit-box-flex-group: 2;
        -moz-box-flex-group: 1;
        -o-box-flex-group: 1;
        -ms-box-flex-group: 1;

        -webkit-box-ordinal-group: 1;
        -moz-box-ordinal-group: 1;
        -o-box-ordinal-group: 1;
        -ms-box-ordinal-group: 1;
     }
  </style>
</head>
<body>
  <div class="box" id="box">
     <div class="box-item-1" id="box-item-1">box-item-1</div>
     <div class="box-item-2" id="box-item-2">box-item-2</div>
     <div class="box-item-3" id="box-item-3">box-item-3</div>
  </div>

  box
  <br/>
  <br/>
  box-orient
  <select name="" id="box-orient">
     <option value="horizontal" selected="selected">horizontal</option>
     <option value="vertical">vertical</option>
  </select>
  <br/>
  <br/>
  box-direction
  <select name="" id="box-direction">
     <option value="normal">normal</option>
     <option value="reverse">reverse</option>
  </select>
  <br/>
  <br/>
  box-pack(剩余空间没分配的情况下使用,即没有使用box-flexbox-flex-group)
  <select name="" id="box-pack">
     <option value="start">start</option>
     <option value="center">center</option>
     <option value="end">end</option>
     <option value="justify">justify</option>
  </select>
  <br/>
  <br/>
  box-align
  <select name="" id="box-align">
     <option value="start">start</option>
     <option value="center">center</option>
     <option value="end">end</option>
     <option value="baseline">baseline</option>
     <option value="stretch">stretch</option>
  </select>
  <br/>
  <br/>
  box-item
  <br/>
  <br/>
  <select name="" id="box-item">
     <option value="box-item-1">box-item-1</option>
     <option value="box-item-2">box-item-2</option>
     <option value="box-item-3">box-item-3</option>
  </select>
  <br/>
  <br/>
  box-flex(>=0) 经测试js动态设置此属性无效
<input type="text" id="box-flex"/>
  <br/>
  <br/>
  box-flex-group(>=1)
  <input type="text" id="box-flex-group"/>
  <br/>
  <br/>
  box-ordinal-group(>=1)
  <input type="text" id="box-ordinal-group"/>



  <script>
     var box = document.getElementById("box");
     var orient = document.getElementById("box-orient");
     var direction = document.getElementById("box-direction");
     var pack = document.getElementById("box-pack");
     var align = document.getElementById("box-align");
     var flex = document.getElementById("box-flex");
     var flexGroup = document.getElementById("box-flex-group");
     var ordinalGroup = document.getElementById("box-ordinal-group");
     var boxItem = document.getElementById("box-item");

     var array = [
        {dom: orient, type: "Orient"},
        {dom: direction, type: "Direction"},
        {dom: pack, type: "Pack"},
        {dom: align, type: "Align"}
     ]

     function onchangeBind (dom, type) {
        dom.onchange =function () {
           box.style["webkitBox" + type] = this.value;
           box.style["mozBox" + type] = this.value;
           box.style["oBox" + type] = this.value;
           box.style["msBox" + type] = this.value;
        }
     }

     for (var i = 0; i < array.length; i++) {
        onchangeBind(array[i].dom, array[i].type);
     }

     flex.onblur = function () {
        var itemType = boxItem.value;
        var item = document.getElementById(itemType);
        var value = this.value ? this.value : 0;

        item.style.webkitBoxFlex = value;
        item.style.mozBoxFlex = value;
        item.style.oBoxFlex = value;
        item.style.msBoxFlex = value;
     }

     flexGroup.onblur = function () {
        var itemType = boxItem.value;
        var item = document.getElementById(itemType);
        var value = this.value ? this.value : 1;

        item.style.webkitBoxFlexGroup = value;
        item.style.mozBoxFlexGroup = value;
        item.style.oBoxFlexGroup = value;
        item.style.msBoxFlexGroup = value;
     }

     ordinalGroup.onblur = function () {
        var itemType = boxItem.value;
        var item = document.getElementById(itemType);
        var value = this.value ? this.value : 1;

        item.style.webkitBoxOrdinalGroup = value;
        item.style.mozBoxOrdinalGroup = value;
        item.style.oBoxOrdinalGroup = value;
        item.style.msBoxOrdinalGroup = value;
     }
  </script>
</body>
</html>



  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 18
博文 164
码字总数 47430
×
LorinLuo
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: