2分钟吃透常见flex布局属性@慕课网原创_慕课网

本页面可用于教学，查询，是教师，懒人和学渣的福利
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="Eric_XinZe">
    <meta name="generator" content="webstorm">
    <meta name="keywords" content="webeducation">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            padding: 10px;
            background: #fff2db;
        }

        select {
            outline: none;
            border: 1px solid #000;
            background: #c5c5c5;
        }

        i {
            font-style: normal;
            color: orange;
        }

        #demo {
            width: 80%;
            margin: 0 auto;
            border: 1px solid #000;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #box {
            width: 400px;
            height: 250px;
            background: #ff5555;
            position: relative;
            /*display: flex;*/
            box-shadow: 0px 0px 5px;
            padding: 5px;
            z-index: 2;
            transition: all 1s;
        }

        #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 {
            text-align: center;
            color: #fff;
            padding: 0 10px 0 10px;
            margin: 2px;
            text-decoration: underline;
        }

        .item:nth-child(1) {
            background: #eacf7d;
            width: 120px;
            font-size: 20px;
        }

        .item:nth-child(2) {
            background: yellowgreen;
            font-size: 25px;
            width: 80px;
        }

        .item:nth-child(3) {
            background: deepskyblue;
            width: 70px;
        }

        .four {
            background: coral;
            color: #fff;
            font-size: 15px;
            text-align: center;
            width: 120px;
            height: 40px;
            text-decoration: underline;
        }

        #range {
            position: absolute;
            left: 0;
            bottom: 0;
            transform: translate(0, 100%);
            cursor: pointer;
            width: 400px;
        }

        /*#msg {*/
        /*position: absolute;*/
        /*top: 10px;*/
        /*left: 10px;*/
        /*font-size: 15px;*/
        /*}*/
        #flex_item {
            width: 100%;
            margin-top: 30px;
            font-size: 10px;
        }

        #flex_item input {
            background: transparent;
            border: none;
            box-shadow: 0px 0px 4px 0px #000;
            outline: none;
            width: 50px;
        }

        .flex_item1 {
            background: #eacf7d;
        }

        .flex_item2 {
            background: #9acd32;
        }

        .flex_item3 {
            background: #00bfff;
        }

        .flex_item4 {
            background: #ff7f50;
        }

        .item input {
            width: 100%;
        }

        #dis-btn {
            position: absolute;
            width: 200px;
            right: -200px;
            top: 0;
        }

        select {
            transition: all 0.5s;
        }

        #btnwrap {
            position: absolute;
            display: none;
            right: 0;
            bottom: 94px;
            transition: all 1s;
        }
        .flexitem{
            width: 200px;
        }
    </style>
</head>
<body>
<header>
    <h1>通过点击下拉菜单切换元素显示方式或者操作属性</h1>
    <p>display 为 flex 时，显示flex容器属性设置菜单</p>
    <p>菜单显示值为默认值</p>
</header>
<section>
    <div id="demo">
        <div id="box">
            <div class="item one" id="box0">A <input type="range" max="120" step="10" value="120" min="20"></div>
            <div class="item two">B <input type="range" max="80" step="10" value="100" min="20"></div>
            <div class="item three">C <input type="range" max="70" step="10" value="100" min="20"></div>
            <div class="item four">Dheight: 40px;<input type="range" max="120" step="10" value="120" min="20"></div>
            <div id="btnwrap">
                <select class="flexitem" 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 class="flexitem" 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 class="flexitem" 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 class="flexitem" id="btn3">
                    <option value="">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 class="flexitem" 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>
                </select>
            </div>
            <input id="range" type="range" step="10" value="400" min="0" max="400">
            <select id="dis-btn">
                <option value="">display:block</option>
                <option value="flex">display:flex</option>
            </select>
        </div>
        <!--#box-->
        <!--<div id="msg">-->
        <!--<p>BoxWidth:<span id="widthmsg">400</span></p>-->
        <!--<p>item1.width:<span id="item1">undefined</span></p>-->
        <!--<p>item2.width:<span id="item2">80</span></p>-->
        <!--<p>item3.width:<span id="item3">70</span></p>-->
        <!--<p>item4.width:<span id="item4">undefined</span></p>-->
        <!--</div>-->
        <table id="flex_item">
            <tr>
                <td>order:</td>
                <td>flex-grow:</td>
                <td>flex-shrink:</td>
                <td>flex-basis:</td>
                <td>align-self:</td>
                <td>flex:</td>
            </tr>
            <tr class="flex_item flex_item1" data-tar="one">
                <td><input type="number" title="order" value="0"></td>
                <td><input type="number" title="flexGrow" value="0"></td>
                <td><input type="number" title="flexShrink" value="1"></td>
                <td><input type="text" value="auto" title="flexBasis"></td>
                <td>
                    <select title="alignSelf">
                        <option value="">stretch</option>
                        <option value="flex-start">flex-start</option>
                        <option value="flex-end">flex-end</option>
                        <option value="center">center</option>
                        <option value="baseline">baseline</option>
                    </select>
                </td>
                <td>
                    <select title="flex">
                        <option value=""></option>
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </td>
            </tr>
            <tr class="flex_item flex_item2" data-tar="two">
                <td><input type="number" title="order" value="0"></td>
                <td><input type="number" title="flexGrow" value="0"></td>
                <td><input type="number" title="flexShrink" value="1"></td>
                <td><input type="text" value="auto" title="flexBasis"></td>
                <td>
                    <select title="alignSelf">
                        <option value="">stretch</option>
                        <option value="flex-start">flex-start</option>
                        <option value="flex-end">flex-end</option>
                        <option value="center">center</option>
                        <option value="baseline">baseline</option>
                    </select>
                </td>
                <td>
                    <select title="flex">
                        <option value=""></option>
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </td>
            </tr>
            <tr class="flex_item flex_item3" data-tar="three">
                <td><input type="number" title="order" value="0"></td>
                <td><input type="number" title="flexGrow" value="0"></td>
                <td><input type="number" title="flexShrink" value="1"></td>
                <td><input type="text" value="auto" title="flexBasis"></td>
                <td>
                    <select title="alignSelf">
                        <option value="" selected="selected">stretch</option>
                        <option value="flex-start">flex-start</option>
                        <option value="flex-end">flex-end</option>
                        <option value="center">center</option>
                        <option value="baseline">baseline</option>
                    </select>
                </td>
                <td>
                    <select title="flex">
                        <option value=""></option>
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </td>
            </tr>
            <tr class="flex_item flex_item4" data-tar="four">
                <td><input type="number" title="order" value="0"></td>
                <td><input type="number" title="flexGrow" value="0"></td>
                <td><input type="number" title="flexShrink" value="1"></td>
                <td><input type="text" value="auto" title="flexBasis"></td>
                <td>
                    <select title="alignSelf">
                        <option value="">stretch</option>
                        <option value="flex-start">flex-start</option>
                        <option value="flex-end">flex-end</option>
                        <option value="center">center</option>
                        <option value="baseline">baseline</option>
                    </select>
                </td>
                <td>
                    <select title="flex">
                        <option value=""></option>
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </td>
            </tr>
        </table>
        <small>Wechat：shangxin1991118</small>
    </div>

</section>

<script type="text/javascript">
    var box = document.getElementById('box');
    var btn = document.getElementById('btn');
    var disBtn = document.getElementById('dis-btn');
    var btnwrap = document.getElementById('btnwrap')
    disBtn.onclick = function () {
        mark(this);
        box.style.display = this.value;
        if (this.value === "flex") {
            btnwrap.style.display = "block";
        } else {
            btnwrap.style.display = "none";
        }
    };
    btn.onclick = function () {
        mark(this);
        box.style.flexDirection = this.value;
    };
    var btn1 = document.getElementById('btn1');
    btn1.onclick = function () {
        mark(this);
        box.style.flexWrap = this.value;
    };

    //按钮颜色改变标记
    function mark(obj) {
        if (obj.value !== '') {
            obj.style.color = '#fff';
            obj.style.backgroundColor = '#000';
        } else {
            obj.style.color = '#000';
            obj.style.backgroundColor = '#c5c5c5';
        }
    }

    //rang控制
    var range = document.getElementById('range');
    range.onmousemove = function () {
        box.style.width = this.value + 'px';
    };
    //flex容器侦听委托事件
    box.addEventListener('change', function (e) {
        var tar = e.target;
        console.log(tar.value)
        if (tar.nodeName.toLowerCase() == "input") {
            tar.parentElement.style.width = tar.value + "px";
            tar.color = "red";
        }
    });

    var btn2 = document.getElementById('btn2');
    btn2.onclick = function () {
        mark(this);
        box.style.alignContent = this.value;
    };
    var btn3 = document.getElementById('btn3');
    btn3.onclick = function () {
        mark(this);
        box.style.justifyContent = this.value;
    };
    var btn4 = document.getElementById('btn4');
    btn4.onclick = function () {
        mark(this);
        box.style.alignItems = this.value;
    }
    //子元素flex子元素属性设置
    var flex_item = document.querySelector("#flex_item");

    function getEle(ele) {
        var _ele = document.querySelectorAll(ele)
        if (!_ele.length == 0) {
            return _ele[0];
        } else {
            return _ele;
        }
    }

    //子元素样式改变委托侦听
    flex_item.addEventListener('change', function (e) {
        var tar = e.target;
        if (tar.nodeName.toLowerCase() === "input" || tar.nodeName.toLowerCase() === "select") {
            mark(tar)
            var tarclass = tar.parentElement.parentElement.dataset.tar;
            var tarAttr = tar.title;
            var tarele = getEle('.' + tarclass)
            tarele.style[tarAttr] = tar.value;
        }
        ;
    });
</script>
</body>
</html>