The Flex Playground

Dynamically demo EVERY flex property.

by michananya

HTML

<section>
    <div class="toggle">
        <button class="add">Append new</button>
        <button class="removeLast">Remove last</button>
        <button class="renumber">Renumber</button>
    </div>
    <ul id="flex-container"></ul>
</section>
<template id="template">
    <div class="controls">
        <span class="number"></span>
    </div>
</template>

CSS

html {
  box-sizing: border-box;
}



section {
    width: 100%;
    margin: 0 auto;
    border: 1px solid black;
    text-align: center;
    padding-bottom: 5px;
}


 #flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    background: #f2f2f2;
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    flex-wrap: no-wrap;
    
    flex-direction: row; 
    /* align-items: flex-start; */
    /* justify-content: space-between; */
}


#flex-container > * {
    background: tomato;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
    margin: 0 0 5px 5px;
    font-size: medium;
    pointer-events: none;
    
    /* THE COLUMN COUNT */
    flex: 1 0 auto;
}

#flex-container > *.selected {
    background: red;
}

.controls {
    position: relative;
}

.remove {
    font-size: small;
    text-transform: uppercase;
    position: absolute;
    top: 2px;
    right: 4px;
    cursor: pointer;
    pointer-events: all;
}

.toggle {
    padding:10px;
    margin-bottom: 10px;
    background: Salmon; 
}


/**
 * TO DO:
 *     - Create JS controls to add/change flex styles for the flex-container
 *     - Create JS controls to add/change flex styles for the flex-children as a group
 *     - Create JS controls to add/change flex styles for the individual flex-children
 */

JavaScript

/**
 * RENUMBER
 */
var renumber = function() {
	var ul = document.getElementById('flex-container');
    var len = ul.children.length;
    for (i = 0; i < len; i++) {
    	ul.children[i].querySelector('.number').innerHTML = i+1 + '';
    }
}

/**
 * REMOVE
 */
var removeFlexListItem = function(event) {
    event.stopPropagation();
	this.remove();
}
window.removeFlexListItem = removeFlexListItem;

/**
 * ADD
 */
var addFlexListItem = function () {
    // grab the ul
    var ul = document.getElementById('flex-container');
    // create a new li element
    var li = document.createElement("li");
    // grab the template
    var template = document.querySelector('#template');
    // clone the template
	var clone = document.importNode(template.content, true);
    // get the next number
    var number = (ul.children.length ? document.createTextNode(Number(ul.children[ul.children.length - 1].querySelector('.number').innerText) + 1) : document.createTextNode(1));
    clone.querySelector('.number').appendChild(number);
    // add an event to the new list item
    li.addEventListener("click", removeFlexListItem, true);
	// add the template content to the list item    
    li.appendChild(clone);
    // add the new list item to the ul
    ul.appendChild(li);
}
window.addFlexListItem = addFlexListItem;



/**
 * DOCUMENT READY
 */
$(document).ready(function () {
    // create initial items on run/pageload
    for (i = 0; i <= 2; i++) {
        addFlexListItem();
    }

    // create an add click event
    $('.add').click(function (ev) {
        ev.stopPropagation();
        addFlexListItem();
    });
    
    // create remove click event
    $('.removeLast').click(function (ev) {
        ev.stopPropagation();
        var ul = document.getElementById('flex-container');
    	var len = ul.children.length;
        if(len) {
    		ul.removeChild(ul.children[len-1])
    	}
    });
    
    // create a renumber event
    $('.renumber').click(function (ev) {
       ...