<main class="main-wrapper">
    <aside class="opr-wrapper" id="opr_wrapper">
        <h4>parent父容器</h4>
        <div id="parent_attr_wrapper"></div>
        <h4>item子项</h4>
        <div id="item_attr_wrapper"></div>
    </aside>
    <div class="flex-wrapper">
        <div class="parent">
            <div class="item a">a</div>
            <div class="item b">b</div>
            <div class="item c">c</div>
            <div class="item d">d</div>
            <div class="item e">e</div>
        </div>
    </div>
</main>
.main-wrapper {
    display: flex;
}

.main-wrapper>.opr-wrapper {
    flex-basis: 70%;
    height:230px;
    overflow-y: auto;
}

.main-wrapper>.flex-wrapper {
    flex-basis: 30%;
}

label+input {
    margin-left: 15px;
}

.parent {
    display: flex;
    height: 200px;
    background: #eeeeee;
}

.item.a {
    background-color: coral;
}

.item.b {
    background-color: lightblue;
}

.item.c {
    background-color: khaki;
}

.item.d {
    background-color: pink;
}

.item.e {
    background-color: lightgrey;
}

.item.f {
    background-color: lightgreen;
}
window.onload = function() {
    createParentAttrList();
    createItemAttrList();
    registerEvent();
    setFlexStyle();
};

/**
 * 创建parent容器属性列表
 */
var createParentAttrList = function() {
    var attrList = [
        { name: 'flex-direction', value: ['row', 'row-reverse', 'column', 'column-reverse'], default: 'row', title: '设置item展示的方向' },
        { name: 'flex-wrap', value: ['nowrap', 'wrap', 'wrap-reverse'], default: 'nowrap', title: '当item在一行展示不下时,设置换行显示的方式' },
        {
            name: 'justify-content',
            value: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'],
            default: 'flex-start',
            title: '控制所有item在main axis(主轴)上的对齐方式'
        },
        {
            name: 'align-items',
            value: ['stretch', 'flex-start', 'flex-end', 'center', 'baseline'],
            default: 'stretch',
            title: '控制所有item在cross axis(交叉轴)的对齐方式'
        },
        {
            name: 'align-content',
            value: ['stretch', 'flex-start', 'flex-end', 'center', 'space-between', 'space-around'],
            default: 'stretch',
            title: '当 flex-wrap:wrap*  时(即item换行排列),控制item在cross axis(交叉轴)曲线上的对齐方式'
        }
    ];
    createAttrList(attrList, 'parent_attr_wrapper');
};

/**
 * 创建item容器属性列表
 */
var createItemAttrList = function() {
    var attrList = [
        { name: 'flex-basis', value: ['auto', '50px', '150px', '30%'], default: 'auto', title: '设置item的初始化大小' },
        {
            name: 'flex-grow',
            value: ['0', '1'],
            default: '0',
            title: '指定item的瓜分剩余空间的占比;当前item的剩余空间占比 = current.flex-grow / allI.flex-grow 之和'
        }
    ];
    createAttrList(attrList, 'item_attr_wrapper');
};

/**
 * 创建列表
 * @param {Array} attrList
 * @param {String} containerId
 */
var createAttrList = function(attrList, containerId) {
    var containerEl = document.getElementById(containerId);
    for (var i = 0; i < attrList.length; i++) {
        var en = attrList[i];
        // 1)创建<p>
        var pEl = document.createElement('p');
        containerEl.appendChild(pEl);

        // 2)属性名
        pEl.innerText = en.name + ' : ';
        pEl.title = en.title;

        // 3)遍历值
        for (var j = 0; j < en.value.length; j++) {
            var value = en.value[j];
            // 4)<radio>
            var radioEl = document.createElement('input');
            radioEl.setAttribute('type', 'radio');
            radioEl.setAttribute('id', en.name + '_' + value);
            radioEl.setAttribute('name', en.name);
            radioEl.setAttribute('value', value);
            pEl.appendChild(radioEl);

            // 5)<label>
            var labelEl = document.createElement('label');
            labelEl.setAttribute('for', radioEl.getAttribute('id'));
            labelEl.innerText = value;
            if (value == en.default) {
                labelEl.innerText += '(默认)';
                radioEl.setAttribute('checked', true);
            }
            pEl.appendChild(labelEl);
        }
    }
};

/**
 * 注册radio事件
 */
var registerEvent = function() {
    document.getElementById('opr_wrapper').onclick = function() {
        setFlexStyle();
    };
};

/**
 * 设置flexStyle
 */
var setFlexStyle = function() {
    var radioList = document.getElementById('opr_wrapper').getElementsByTagName('input');
    for (var i = 0; i < radioList.length; i++) {
        var radio = radioList[i];
        if (radio.type == 'radio' && radio.checked) {
            var parentDiv = radio.parentElement;
            // 1.获取父容器div
            while (parentDiv.nodeName != 'DIV') {
                parentDiv = parentDiv.parentElement;
            }
            // 2.根据div的id指定附加到flex中的parent或item上
            if (parentDiv.id == 'parent_attr_wrapper') {
                document.getElementsByClassName('parent')[0].style[radio.name] = radio.value;
            } else if (parentDiv.id == 'item_attr_wrapper') {
                for (var j = 0; j < document.getElementsByClassName('item').length; j++) {
                    document.getElementsByClassName('item')[j].style[radio.name] = radio.value;
                }
            }
        }
    }
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.