FlexBox Container Visualizer

HTML

            
              <!--Everything between this and the END comment is building the visualizer's UI. -->
<div class="title">FlexBox Parent Attribute Visualizer</div>
<div class="sub">(Probably doesn't work on mobile)</div><br><br>

<div class="uiContain">
	<div class="alignContain">
		<div class="align contain">
			<h2>X Axis Spacing</h2>
			<div class="lowCase">(Set Wrap Content to "Yes")<br></div><br>
			Left:
			<input type="radio" name="rad" id="alignLft"><br>
			Center:
			<input type="radio" name="rad" id="alignCtr"><br>
			Right:
			<input type="radio" name="rad" id="alignRght"><br>
			Space-Between:
			<input type="radio" name="rad" id="alignSB"><br>
			Space-Around:
			<input type="radio" name="rad" id="alignSA"><br>
			Space-Evenly:
			<input type="radio" name="rad" id="alignSE">
		</div>
		<div class="alignMsg baseMsg">
			<div class="msg" id="leftMsg">
				<span>CSS:</span><br>
				.parentElement {<br>
				justify-content: flex-start;<br>
				}
			</div>
			<div class="msg" id="centerMsg">
				<span>CSS: </span><br>
				.parentElement {<br>
				justify-content: center;<br>
				}
			</div>
			<div class="msg" id="rightMsg"><span>CSS: </span><br>
				.parentElement {<br>
				justify-content: flex-end;<br>
				}
			</div>
			<div class="msg" id="sbMsg"><span>CSS: </span><br>
				.parentElement {<br>
				justify-content: space-between;<br>
				}
			</div>
			<div class="msg" id="saMsg"><span>CSS: </span><br>
				.parentElement {<br>
				justify-content: space-around;<br>
				}
			</div>
			<div class="msg" id="seMsg"><span>CSS: </span><br>
				.parentElement {<br>
				justify-content: space-evenly;<br>
				}
			</div>
		</div>
	</div>
	<div class="yContain">
		<div class="yAxis contain">
			<h2>Y Axis Spacing</h2>
			
			Flex-Start:
			<input type="radio" name="y" id="yStrt" class="yCheck" disabled><br>
			Flex-End:
			<input type="radio" name="y" id="yEnd" class="yCheck" disabled><br>
			Center:
			<input type="radio" name="y" id="yCtr" class="yCheck" disabled><br>
			Space-Between:
			<input type="radio" name="y" id="ySb" class="yCheck" disabled><br>
			Space-Around:
			<input type="radio" name="y" id="ySa" class="yCheck" disabled>
		</div>
		<div class="yMsg baseMsg">
			<div class="msg" id="yStrtMsg">
				<span>CSS:</span><br>
				.parentElement {<br>
				align-content: flex-start;<br>
				}
			</div>
			<div class="msg" id="yEndMsg">
				<span>CSS: </span><br>
				.parentElement {<br>
				align-content: flex-end;<br>
				}
			</div>
			<div class="msg" id="yCtrMsg"><span>CSS: </span><br>
				.parentElement {<br>
				align-content: center;<br>
				}
			</div>
			<div class="msg" id="ySbMsg"><span>CSS: </span><br>
				.parentElement {<br>
				align-content: space-between;<br>
				}
			</div>
			<div class="msg" id="ySaMsg"><span>CSS: </span><br>
				.parentElement {<br>
				align-content: space-around;<br>
				}
			</div>
		</div>
	</div>
	<div class="enable"><span class="yEnblRed">Enable<br> Y Axis Tools:<br></span>
	<input type="checkbox" name="cb" id="yEnable">
	</div>
	<div class="yAlignContain">
		<div class="ai contain">
			<h2>Y Axis Align</h2>
			Flex-Start:
			<input type="radio" name="y" id="aiStart" disabled><br>
			Flex-End:
			<input type="radio" name="y" id="aiEnd" disabled><br>
			Center:
			<input type="radio" name="y" id="aiCenter" disabled><br>
			Baseline:
			<input type="radio" name="y" id="aiBaseline" disabled>
		</div>
		<div class="aiMsg baseMsg">
			<div class="msg" id="aiStrtMsg">
				<span>CSS:</span><br>
				.parentElement {<br>
				align-items: flex-start;<br>
				}
			</div>
			<div class="msg" id="aiEndMsg">
				<span>CSS: </span><br>
				.parentElement {<br>
				align-items: flex-end;<br>
				}
			</div>
			<div class="msg" id="aiCtrMsg"><span>CSS: </span><br>
				.parentElement {<br>
				align-items: center;<br>
				}
			</div>
			<div class="msg" id="aiBaseMsg"><span>CSS: </span><br>
				.parentElement {<br>
				align-items: baseline;<br>
				}
			</div>
		</div>
	</div>
	<div class="wrapContain">
		<div class="wrap contain">
			<h2>Wrap Content</h2>
			Yes:
			<input type="radio" name="wrap" id="wrapY">
			No:
			<input type="radio" name="wrap" id="wrapN" checked>
		</div>
		<div class="wrapMsg baseMsg">
			<div class="msg" id="wrap"><span>CSS: </span><br>
				.parentElement {<br>
				flex-wrap: wrap;<br>
				}
			</div>
			<div class="msg" id="no-wrap"><span>CSS: </span><br>
				.parentElement {<br>
				flex-wrap: no-wrap;<br>
				}
			</div>
		</div>
	</div>
</div>
<!--END-->
<div class="divider"></div>
<div class="shadowContain">
	<div class="flexContain" id="flexContain">
		<div class="flexElement blue">1</div>
		<div class="flexElement gold">2</div>
		<div class="flexElement prpl">3</div>
		<div class="flexElement whit">4</div>
		<div class="flexElement blue">1</div>
		<div class="flexElement gold">2</div>
		<div class="flexElement prpl">3</div>
		<div class="flexElement whit">4</div>
		<div class="flexElement blue">1</div>
		<div class="flexElement gold">2</div>
		<div class="flexElement prpl">3</div>
		<div class="flexElement whit">4</div>
		<div class="flexElement blue">1</div>
		<div class="flexElement gold">2</div>
		<div class="flexElement prpl">3</div>
		<div class="flexElement whit">4</div>
	</div>
</div>

CSS

            
              body {
	background-color: #2a2a2a;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23010101' fill-opacity='0.4'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
}

$blue: #44AAEE;
$gold: #EEAA44;
$prpl: #AA44EE;
$whit: #ddd;

.divider {
	margin-top: 30px;
	width: 100%;
	background: $whit;
	height: 4px;
	mix-blend-mode: overlay;
}

.flexContain {
	width: 84%;
	margin: 8%;
	background: #333;
	display: flex;
	margin-top: 30px;
}

.alignLft {
	justify-content: flex-start;
}

.alignCtr {
	justify-content: center;
}

.alignRght {
	justify-content: flex-end;
}

.alignSB {
	justify-content: space-between;
}

.alignSA {
	justify-content: space-around;
}

.alignSE {
	justify-content: space-evenly;
}

.wrapY {
	flex-wrap: wrap;
}

.wrapN {
	flex-wrap: no-wrap;
}

.yStrt {
	align-content: flex-start;
}

.yEnd {
	align-content: flex-end;
}

.yCtr {
	align-content: center;
}

.ySb {
	align-content: space-between;
}

.ySa {
	align-content: space-around;
}

.aiStart {
	align-items: flex-start;
}

.aiEnd {
	align-items: flex-end;
}

.aiCenter {
	align-items: center;
}

.aiBaseline {
	align-items: baseline;
}

.flexElement {
	width: 150px;
	height: 150px;
	margin: 10px;
}

.blue {
	font-size: 15px;
	background: $blue;
}

.gold {
	font-size: 25px;
	background: $gold;
}

.prpl {
	font-size: 35px;
	background: $prpl;
}

.whit {
	font-size: 45px;
	background: $whit;
}

//UI Stuff Below
.title {
	font-size: 50px;
	text-align: center;
	color: $whit;
	font-family: sans-serif;
	font-weight: bolder;
}

.sub {
	font-size: 25px;
	text-align: center;
	font-family: sans-serif;
	font-weight: 500;
	color: $blue;
}

.uiContain {
	display: flex;
	justify-content: space-around;
}

.align, .yAxis, .ai {
	text-align: right;
	width: 150px;
	height: auto;
}

.wrap{
	text-align: center;
	width: 150px;
	height: auto;
}

.contain {
	margin: 0 10px;
	padding: 7px;
	background: #383838;
	color: #ddd;
	font-weight: 600;
	font-family: sans-serif;
	font-size: 16px;
	letter-spacing: 0.1px;
	border-radius: 5px;
}

.align > h2 {
	color: #44AAEE;
}

.wrap > h2 {
	color: $whit;
}

.yAxis > h2 {
	color: $gold;
}

.ai > h2 {
	color: $prpl;
}

h2 {
	margin-bottom: 10px;
	margin-top: 0;
	text-align: center;
}

.baseMsg {
	width: 150px;
	margin: 0 10px;
}

.msg {
	color: #EEE;
	font-size: 15px;
	padding-top: 10px;
	display: none;
}

.msg > span,.msg > span, .msg > span {
	color: #ee3344;
	font-size: 14px;
	font-weight: bold;
	font-family: sans-serif;
}

.enable {
	text-align: center;
	transform: translateY(50px);
	font-size: 18px;
	font-family: sans-serif;
	font-weight: bold;
}

.yEnblRed {
	color: #DD4444;
}

.yEnblGrn {
	color: #44BD44;
}

.shadowContain {
	height: 100vh;
}

.lowCase {
	width: 100%;
	text-align: center;
	font-weight: 400;
	font-size: 14px;
	margin-right: 23px;
}

JS

            
              function addClass(selector, myClass) {
  elements = document.querySelectorAll(selector);
  for (let i=0; i<elements.length; i++) {
    elements[i].classList.add(myClass);
  }
}
function removeClass(selector, myClass) {
  elements = document.querySelectorAll(selector);
  for (let i=0; i<elements.length; i++) {
    elements[i].classList.remove(myClass);
  }
}

var show = function (elem) {
	elem.style.display = 'block';
};

var hide = function (elem) {
	elem.style.display = 'none';
};

var aiStrtMsg = document.getElementById("aiStrtMsg");
var aiEndMsg = document.getElementById("aiEndMsg");
var aiCtrMsg = document.getElementById("aiCtrMsg");
var aiBaseMsg = document.getElementById("aiBaseMsg");
var leftMsg = document.getElementById("leftMsg");
var centerMsg = document.getElementById("centerMsg");
var rightMsg = document.getElementById("rightMsg");
var sbMsg = document.getElementById("sbMsg");
var saMsg = document.getElementById("saMsg");
var seMsg = document.getElementById("seMsg");
var wrapMsg = document.getElementById("wrap");
var nWrapMsg = document.getElementById("no-wrap");
var yStrtMsg = document.getElementById("yStrtMsg");
var yEndMsg = document.getElementById("yEndMsg");
var yCtrMsg = document.getElementById("yCtrMsg");
var ySbMsg = document.getElementById("ySbMsg");
var ySaMsg = document.getElementById("ySaMsg");

var aiStart = document.getElementById("aiStart");
var aiEnd = document.getElementById("aiEnd");
var aiCenter = document.getElementById("aiCenter");
var aiBaseline = document.getElementById("aiBaseline");
var wrp = document.getElementById('wrapY');
var nWrp = document.getElementById('wrapN');
var left = document.getElementById('alignLft');
var center = document.getElementById('alignCtr');
var right = document.getElementById('alignRght');
var sb = document.getElementById('alignSB');
var sa = document.getElementById('alignSA');
var se = document.getElementById('alignSE');
var yEnable = document.getElementById('yEnable');
var yStrtR = document.getElementById('yStrt');
var yEndR = document.getElementById('yEnd');
var yCtrR = document.getElementById('yCtr');
var ySbR = document.getElementById('ySb');
var ySaR = document.getElementById('ySa');

aiStart.addEventListener("change", aiStrtF, false);
aiEnd.addEventListener("change", aiEndF, false);
aiCenter.addEventListener("change", aiCtrF, false);
aiBaseline.addEventListener("change", aiBaseF, false);
yEnable.addEventListener("change", yEnblF, false);
yStrtR.addEventListener("change", yStrtF, false);
yEndR.addEventListener("change", yEndF, false);
yCtrR.addEventListener("change", yCtrF, false);
ySbR.addEventListener("change", ySbF, false);
ySaR.addEventListener("change", ySaF, false);
wrp.addEventListener("change", wrap, false);
nWrp.addEventListener("change", noWrap, false);
left.addEventListener("change", alignLft, false);
center.addEventListener("change", alignCtr, false);
right.addEventListener("change", alignRght, false);
sb.addEventListener("change", alignSB, false);
sa.addEventListener("change", alignSA, false);
se.addEventListener("change", alignSE, false);

function getElementsById(ids) {
    var idList = ids.split(" ");
    var results = [], item;
    for (var i = 0; i < idList.length; i++) {
        item = document.getElementById(idList[i]);
        if (item) {
            results.push(item);
        }
    }
    return(results);
}

function yEnblF(){
	var isChecked = yEnable.checked;
	if(isChecked){
    document.getElementById("yStrt").disabled= false;
		document.getElementById("yEnd").disabled= false;
		document.getElementById("yCtr").disabled= false;
		document.getElementById("ySb").disabled= false;
		document.getElementById("ySa").disabled= false;
		document.getElementById("aiStart").disabled= false;
		document.getElementById("aiEnd").disabled= false;
		document.getElementById("aiCenter").disabled= false;
		document.getElementById("aiBaseline").disabled= false;
		document.getElementById("flexContain").style.height = "120%";
		addClass(".yEnblRed", "yEnblGrn");
	} else {
		document.getElementById("yStrt").disabled= true;
		document.getElementById("yEnd").disabled= true;
		document.getElementById("yCtr").disabled= true;
		document.getElementById("ySb").disabled= true;
		document.getElementById("ySa").disabled= true;
		document.getElementById("aiStart").disabled= true;
		document.getElementById("aiEnd").disabled= true;
		document.getElementById("aiCenter").disabled= true;
		document.getElementById("aiBaseline").disabled= true;
		removeClass('.yEnblRed', "yEnblGrn");
		document.getElementById("flexContain").style.height = "initial";
	}
}

function aiStrtF(){
	var isChecked = aiStart.checked;
	if(isChecked){
		addClass(".flexContain", "aiStart");
		show(aiStrtMsg);
		hide(aiEndMsg);
		hide(aiCtrMsg);
		hide(aiBaseMsg);
		removeClass(".flexContain", "aiEnd");
		removeClass(".flexContain", "aiCenter");
		removeClass(".flexContain", "aiBaseline");
	}
}

function aiEndF(){
	var isChecked = aiEnd.checked;
	if(isChecked){
		addClass(".flexContain", "aiEnd");
		show(aiEndMsg);
		hide(aiStrtMsg);
		hide(aiCtrMsg);
		hide(aiBaseMsg);
		removeClass(".flexContain", "aiStart");
		removeClass(".flexContain", "aiCenter");
		removeClass(".flexContain", "aiBaseline");
	}
}

function aiCtrF(){
	var isChecked = aiCenter.checked;
	if(isChecked){
		addClass(".flexContain", "aiCenter");
		show(aiCtrMsg);
		hide(aiEndMsg);
		hide(aiStrtMsg);
		hide(aiBaseMsg);
		removeClass(".flexContain", "aiEnd");
		removeClass(".flexContain", "aiStart");
		removeClass(".flexContain", "aiBaseline");
	}
}

function aiBaseF(){
	var isChecked = aiBaseline.checked;
	if(isChecked){
		addClass(".flexContain", "aiBaseline");
		show(aiBaseMsg);
		hide(aiEndMsg);
		hide(aiCtrMsg);
		hide(aiStrtMsg);
		removeClass(".flexContain", "aiEnd");
		removeClass(".flexContain", "aiStart");
		removeClass(".flexContain", "aiCenter");
	}
}

function yStrtF(){
	var isChecked = yStrtR.checked;
	if(isChecked){
		addClass(".flexContain", "yStrt");
		show(yStrtMsg);
		hide(yEndMsg);
		hide(yCtrMsg);
		hide(ySbMsg);
		hide(ySaMsg);
		removeClass(".flexContain", "yEnable");
		removeClass(".flexContain", "yEnd");
		removeClass(".flexContain", "yCtr");
		removeClass(".flexContain", "ySb");
		removeClass(".flexContain", "ySa");
	}
}

function yEndF(){
	var isChecked = yEndR.checked;
	if(isChecked){
		addClass(".flexContain", "yEnd");
		show(yEndMsg);
		hide(yStrtMsg);
		hide(yCtrMsg);
		hide(ySbMsg);
		hide(ySaMsg);
		removeClass(".flexContain", "yEnable");
		removeClass(".flexContain", "yStrt");
		removeClass(".flexContain", "yCtr");
		removeClass(".flexContain", "ySb");
		removeClass(".flexContain", "ySa");
	}
}

function yCtrF(){
	var isChecked = yCtrR.checked;
	if(isChecked){
		addClass(".flexContain", "yCtr");
		show(yCtrMsg);
		hide(yStrtMsg);
		hide(yEndMsg);
		hide(ySbMsg);
		hide(ySaMsg);
		removeClass(".flexContain", "yEnable");
		removeClass(".flexContain", "yStrt");
		removeClass(".flexContain", "yEnd");
		removeClass(".flexContain", "ySb");
		removeClass(".flexContain", "ySa");
	}
}

function ySbF(){
	var isChecked = ySbR.checked;
	if(isChecked){
		addClass(".flexContain", "ySb");
		show(ySbMsg);
		hide(yCtrMsg);
		hide(yEndMsg);
		hide(yStrtMsg);
		hide(ySaMsg);
		removeClass(".flexContain", "yEnable");
		removeClass(".flexContain", "yStrt");
		removeClass(".flexContain", "yEnd");
		removeClass(".flexContain", "yCtr");
		removeClass(".flexContain", "ySa");
	}
}

function ySaF(){
	var isChecked = ySaR.checked;
	if(isChecked){
		addClass(".flexContain", "ySa");
		show(ySaMsg);
		hide(yCtrMsg);
		hide(yEndMsg);
		hide(yStrtMsg);
		hide(ySbMsg);
		removeClass(".flexContain", "yEnable");
		removeClass(".flexContain", "yStrt");
		removeClass(".flexContain", "yEnd");
		removeClass(".flexContain", "yCtr");
		removeClass(".flexContain", "ySb");
	}
}

function wrap(){
	var isChecked = wrp.checked;
	if(isChecked){
		addClass(".flexContain", "wrapY");
		show(wrapMsg);
		hide(nWrapMsg);
		removeClass(".flexContain", "wrapN");
	}
}

function noWrap(){
	var isChecked = nWrp.checked;
	if(isChecked){
		addClass(".flexContain", "wrapN");
		hide(wrapMsg);
		show(nWrapMsg);
		removeClass(".flexContain", "wrapY");
	}
}

function alignLft(){
  var isChecked = left.checked;
  if(isChecked){
		addClass(".flexContain", "alignLft");
		show(leftMsg);
		hide(rightMsg);
		hide(centerMsg);
		hide(seMsg);
		hide(sbMsg);
		hide(saMsg);
		removeClass(".flexContain", "alignCtr");
		removeClass(".flexContain", "alignRght");
		removeClass(".flexContain", "alignSB");
		removeClass(".flexContain", "alignSA");
		removeClass(".flexContain", "alignSE");
  }
}
function alignCtr(){
  var isChecked = center.checked;
  if(isChecked){ 
		addClass(".flexContain", "alignCtr");
		show(centerMsg);
		hide(leftMsg);
		hide(rightMsg);
		hide(seMsg);
		hide(sbMsg);
		hide(saMsg);
		removeClass(".flexContain", "alignRght");
		removeClass(".flexContain", "alignLft");
		removeClass(".flexContain", "alignSB");
		removeClass(".flexContain", "alignSA");
		removeClass(".flexContain", "alignSE");
  }
}
function alignRght(){
  var isChecked = right.checked;
  if(isChecked){ 
		addClass(".flexContain", "alignRght");
		show(rightMsg);
		hide(leftMsg);
		hide(centerMsg);
		hide(seMsg);
		hide(sbMsg);
		hide(saMsg);
		removeClass(".flexContain", "alignCtr");
		removeClass(".flexContain", "alignLft");
		removeClass(".flexContain", "alignSB");
		removeClass(".flexContain", "alignSA");
		removeClass(".flexContain", "alignSE");
  }
}
function alignSB(){
  var isChecked = sb.checked;
  if(isChecked){ 
		addClass(".flexContain", "alignSB");
		show(sbMsg);
		hide(leftMsg);
		hide(centerMsg);
		hide(rightMsg);
		hide(saMsg);
		hide(seMsg);
		removeClass(".flexContain", "alignCtr");
		removeClass(".flexContain", "alignRght");
		removeClass(".flexContain", "alignLft");
		removeClass(".flexContain", "alignSA");
		removeClass(".flexContain", "alignSE");
  }
}

function alignSA(){
  var isChecked = sa.checked;
  if(isChecked){ 
		addClass(".flexContain", "alignSA");
		show(saMsg);
		hide(leftMsg);
		hide(centerMsg);
		hide(rightMsg);
		hide(sbMsg);
		hide(seMsg);
		removeClass(".flexContain", "alignCtr");
		removeClass(".flexContain", "alignRght");
		removeClass(".flexContain", "alignLft");
		removeClass(".flexContain", "alignSB");
		removeClass(".flexContain", "alignSE");
  }
}

function alignSE(){
  var isChecked = se.checked;
  if(isChecked){ 
		addClass(".flexContain", "alignSE");
		show(seMsg);
		hide(leftMsg);
		hide(centerMsg);
		hide(rightMsg);
		hide(sbMsg);
		hide(saMsg);
		removeClass(".flexContain", "alignCtr");
		removeClass(".flexContain", "alignRght");
		removeClass(".flexContain", "alignLft");
		removeClass(".flexContain", "alignSB");
		removeClass(".flexContain", "alignSA");
  }
}

999px

Loading ..................

FlexBox Container Visualizer

Insecure Resource

HTML

CSS

JS

Console

Pen Settings

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript Preprocessor

About JavaScript Preprocessors

Add script as a module

About ES6 Modules

Add External Scripts/Pens

About External Resources

Code Indentation

Save Automatically?

Auto-Updating Preview

HTML

CSS

JS

Console

Editor Commands

HTML Specific

Misc

Pen Actions