首页手记 flex布局DEMO，3分钟吃透弹性盒子。。欢迎提出宝...

flex布局DEMO，3分钟吃透弹性盒子。。欢迎提出宝贵意见。

标签：

Html/CSS JavaScript CSS3

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            width: 400px;
            height: 100px;
            background: #ff5555;
            position: relative;
            display: flex;
            margin-left: 200px;
            box-shadow: 0px 0px 5px;
            padding: 2px;
        }
        #btn {
            position: absolute;
            right: 0;
            top: 0;
            transform: translate(100%, 0);
        }
        #btn1 {
            position: absolute;
            right: 0;
            top: 0;
            transform: translate(100%, 100%);
        }
        #btn2 {
            position: absolute;
            right: 0;
            top: 0;
            transform: translate(100%, 200%);
        }
        #btn3 {
            position: absolute;
            right: 0;
            top: 0;
            transform: translate(100%, 300%);
        }
        #btn4 {
            position: absolute;
            right: 0;
            top: 0;
            transform: translate(100%, 400%);
        }
        .item {
            width: 50px;
            text-align: center;
            color: #fff;
            text-decoration: underline;
        }
        .item:nth-child(1) {
            background: #eacf7d;
            font-size: 20px;
        }
        .item:nth-child(2) {
            background: yellowgreen;
            font-size: 25px;
        }
        .item:nth-child(3) {
            background: deepskyblue;
        }
        .four {
            background: coral;
            color:#fff;
            font-size: 15px;
            text-align: center;
            width:50px;
            text-decoration: underline;
        }
        #range {
            position: absolute;
            left: 0;
            bottom: 0;
            transform: translate(0, 100%);
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="box" style="flex-direction: row">
    <div class="item one" id="box0">1</div>
    <div class="item two">2</div>
    <div class="item three">3</div>
    <div class="four">4</div>
    <select id="btn">
        <option value="">flex-direction:row</option>
        <option value="row-reverse">flex-direction:row-reverse</option>
        <option value="column">flex-direction:colum</option>
        <option value="column-reverse">flex-direction:colum-reverse</option>
    </select>
    <select id="btn1">
        <option value="">flex-wrap:no-wrap</option>
        <option value="wrap">flex-wrap:wrap</option>
        <option value="wrap-reverse">flex-wrap:wrap-reverse</option>
    </select>
    <select id="btn2">
        <option value="">align-content:stretch</option>
        <option value="flex-start">align-content:flex-start</option>
        <option value="flex-end">align-content:flex-end</option>
        <option value="center">align-content:center</option>
        <option value="space-between">align-content:space-between</option>
        <option value="space-around">align-content:space-around</option>
    </select>

    <select id="btn3">
        <option value="">justify-content:flex-start</option>
        <option value="flex-start">justify-content:flex-start</option>
        <option value="flex-end">justify-content:flex-end</option>
        <option value="center">justify-content:center</option>
        <option value="space-between">justify-content:space-between</option>
        <option value="space-around">justify-content:space-around</option>
    </select>
    <select id="btn4">
        <option value="">align-items:stretch</option>
        <option value="flex-start">align-items:flex-start</option>
        <option value="flex-end">align-items:flex-end</option>
        <option value="center">align-items:center</option>
        <option value="baseline">align-items:baseline</option>
        <option value="stretch">align-items:stretch</option>
    </select>
    <input id="range" type="range" value="400" min="0" max="400">
</div>
<script type="text/javascript">
    var box = document.getElementById('box');
    var btn = document.getElementById('btn');
    btn.onclick = function () {
        box.style.flexDirection = this.value;
    };
    var btn1=document.getElementById('btn1')
    btn1.onclick = function () {
        box.style.flexWrap = this.value;
    };
    var range = document.getElementById('range');
    range.onmousemove = function () {
        box.style.width = this.value + 'px';
    };
    var btn2 = document.getElementById('btn2');
    btn2.onclick = function () {
        box.style.alignContent=this.value;
    };
    var btn3=document.getElementById('btn3');
    btn3.onclick=function (){
        box.style.justifyContent=this.value;
    };![图片描述][1]
    var btn4=document.getElementById('btn4');
    btn4.onclick=function (){
        box.style.alignItems=this.value;
    }
</script>
</body>
</html>

点击查看更多内容