<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/dlupoGorilla/pen/mAOPWL?limit=all&page=8&q=flex+box" />
<style class="cp-pen-styles">@import 'https://fonts.googleapis.com/css?family=Montserrat';
html,
body {
font-family: "Montserrat";
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #eee;
color: #222222;
overflow-x:hidden;
}
.main.column {
display: flex;
}
.main.column .container {
width: 30%;
}
.main.column .controls {
width: 70%;
}
.main.column span.content {
left: 15%;
}
.container {
background-color: #88499c;
padding: 5px;
list-style-type: none;
margin: 0;
}
.item {
background-color: #f38630;
margin: 10px;
padding: 10px;
color: white;
min-width: 100px;
}
.item span {
display: inline-block;
background: white;
height: 25px;
width: 25px;
line-height: 25px;
border-radius: 100%;
color: #f38630;
text-align: center;
margin: 0 0 10px 0;
}
/* Controls */
h3 {
padding: 0 10px 10px 0;
display: inline-block;
margin: 0;
border-bottom: 2px solid;
}
.left h3 {
color: #88499c;
border-color: #88499c;
}
.right h3 {
color: #f38630;
border-color: #f38630;
}
label {
display: block;
}
label:before {
content: "";
display: block;
margin-top: 20px;
clear: both;
}
input[type="text"] {
display: block;
margin-top: 5px;
box-sizing: border-box;
width: 100%;
padding: 10px;
}
input[type="text"].number {
width: 65px;
display: inline-block;
}
#flex-control {
display: flex;
}
.left,
.right {
width: 50%;
box-sizing: border-box;
padding: 20px;
border: 1px solid #e8e8e8;
}
select {
border-radius: 3px;
box-sizing: border-box;
background-color: white;
height: 36px;
line-height: 14px;
padding: 10px;
text-indent: .01em;
vertical-align: baseline;
width: 100%;
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDMwIDYwIj48cGF0aCBmaWxsPSIjRjJFQkRFIiBmaWxsLW9wYWNpdHk9IjAiIGQ9Ik0wIDBoMzB2NjBIMHoiLz48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiNBREE4OUUiIHN0cm9rZS1vcGFjaXR5PSIwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIGQ9Ik0uNSA2MFYwIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiMzMzMiIGQ9Ik0xNS42NzYgMzMuMDM3bDUuMTAyLTUuMTAzLS43MDctMS4wODYtNC40OSA0LjQ5Mi00LjQ5LTQuNDkyLS43MDIgMS4wODYgNS4xMDIgNS4xMDMuMDc1LjExNS4wMi0uMDIuMDIuMDJ6Ii8+PC9zdmc+) no-repeat 100% 45% white;
margin-top: 5px;
-webkit-appearance: none;
}
/* Code */
button {
background: none repeat scroll 0 0 transparent;
border: medium none;
border-spacing: 0;
font-weight: normal;
line-height: 1.42rem;
list-style: none outside none;
margin: 0;
padding: 0;
text-align: left;
text-decoration: none;
text-indent: 0;
font-size: 1.17em;
padding: 10px;
display: inline-block;
margin: 0;
border: 2px solid;
border-color: #88499c;
color: #88499c;
cursor: pointer;
font-family: "Montserrat";
margin-bottom: 2px;
}
button:focus {
outline:0;
}
button:active {
margin-top: 2px;
}
#code-container {
position: relative;
}
#copy-to-clipboard {
position: absolute;
right: 20px;
top: 20px;
}
#CSScode {
background: #222222;
min-height: 100px;
color: #f38630;
}
code {
display: block;
}
code:not(.default) {
clear: both;
padding: 20px;
white-space: pre;
word-break: normal;
word-wrap: normal;
}
span.tooltip {
display: block;
position: relative;
width: 100%;
}
span.icon {
float: right;
cursor: pointer;
display: inline-block;
height: 25px;
width: 25px;
line-height: 25px;
border-radius: 100%;
text-align: center;
border: 2px solid #cecece;
color: #cecece;
margin: -5px 0 5px 0;
}
span.content {
z-index: 1;
position: absolute;
display: none;
left: 50%;
right: 35px;
background: #fff;
padding: 10px;
border: 1px solid #222222;
font-weight: normal;
font-size: 14px;
}
span.icon:hover + span.content {
display: block;
}
#extra > * {
margin: 25px;
}
#extra-container {
display:flex;
margin: 0 15px;
}
#extra-container > div {
padding: 0 10px;
min-width: 33%;
}
#extra-container p {
font-size: 14px;
border: 1px solid #222222;
padding: 10px;
background: white;
}
#source {
width: 100%;
text-align: center;
}
</style></head><body>
<div class="felx-box-builder">
<div class="slides">
<section class="main column">
<ul class="container">
<li class="item"><span>1</span></li>
<li class="item"><span>2</span><br>Sample Text</li>
<li class="item"><span>3</span><br>More sample text to test alignment</li>
<li class="item"><span>4</span><br>A lot more sample text to test alignment and flex stretch. I like peanut butter and jelly sandwitches. All jokes aside, peanut allergies are a serious and growing health problem in the Western world, affecting millions of kids and their families.</li>
<li class="item"><span>5</span><br>Some sample text</li>
</ul>
<div class="controls">
<form action="" id="flex-control">
<div class="left">
<h3>Container</h3>
<label>
<span class="tooltip">
<span class="icon">?</span>
<span class="content">This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.</span>
</span>
Display
</label>
<select name="display" id="display">
<option value="">null (block)</option>
<option value="flex">flex</option>
<option value="inline-flex">inline-flex</option>
</select>
<label>
<span class="tooltip">
<span class="icon">?</span>
<span class="content">This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.</span>
</span>
Flex direction
</label>
<select name="flex-direction" id="flex-direction">
<option value="">null</option>
<option value="row">row (default)</option>
<option value="row-reverse">row-reverse</option>
<option value="column">column</option>
<option value="column-reverse">column-reverse</option>
</select>
<label>
<span class="tooltip">
<span class="icon">?</span>
<span class="content">By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. Direction also plays a role here, determining the direction new lines are stacked in.</span>
</span>
Flex Wrap
</label>
<select name="flex-wrap" id="flex-wrap">
<option value="">null</option>
<option value="nowrap">nowrap (default)</option>
<option value="wrap">wrap</option>
<option value="wrap-reverse">wrap-reverse</option>
</select>
<label>
<span class="tooltip">
<span class="icon">?</span>
<span class="content">This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.</span>
</span>
Justify Content
</label>
<select name="justify-content" id="justify-content">
<option value="">null</option>
<option value="flex-start">flex-start</option>
<option value="flex-end">flex-end</option>
<option value="center">center</option>
<option value="space-between">space-between</option>
<option value="space-around">space-around</option>
</select>
<label>
<span class="tooltip">
<span class="icon">?</span>
<span class="content">This defines the default behaviour for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).</span>
</span>
Align Items (cross axis)
</label>
<select name="align-items" id="align-items">
<option value="">null</option>
<option value="stretch">stretch (default)</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>
<label>
<span class="tooltip">
<span class="icon">?</span>
<span class="content">This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. <b>Note:</b> this property has no effect when there is only one line of flex items.</span>
</span>
Align Content
</label>
<select name="align-content" id="align-content">
<option value="">null</option>
<option value="flex-start">flex-start</option>
<option value="flex-end">flex-end</option>
<option value="center">center</option>
<option value="space-between">space-between</option>
<option value="space-around">space-around</option>
<option value="stretch">stretch</option>
</select>
</div>
<div class="right">
<h3>Items</h3>
<label>
<span class="tooltip">
<span class="icon">?</span>
<span class="content">This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.<br><br>Please see the align-items explanation to understand the available values.</span>
</span>
Align Self
</label>
<select name="itemx_1_align-self" id="align-self">
<option value="">Item 1</option>
<option value="auto">auto</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>
<option value="stretch">stretch</option>
</select>
<select name="itemx_2_align-self" id="align-self">
<option value="">Item 2</option>
<option value="auto">auto</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>
<option value="stretch">stretch</option>
</select>
<select name="itemx_3_align-self" id="align-self">
<option value="">Item 3</option>
<option value="auto">auto</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>
<option value="stretch">stretch</option>
</select>
<select name="itemx_4_align-self" id="align-self">
<option value="">Item 4</option>
<option value="auto">auto</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>
<option value="stretch">stretch</option>
</select>
<select name="itemx_5_align-self" id="align-self">
<option value="">Item 5</option>
<option value="auto">auto</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>
<option value="stretch">stretch</option>
</select>
<label>
<span class="tooltip">
<span class="icon">?</span>
<span class="content">By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.</span>
</span>
Order
</label>
<input type="text" class="number" name="itemx_1_order" value="" placeholder="item 1">
<input type="text" class="number" name="itemx_2_order" value="" placeholder="item 2">
<input type="text" class="number" name="itemx_3_order" value="" placeholder="item 3">
<input type="text" class="number" name="itemx_4_order" value="" placeholder="item 4">
<input type="text" class="number" name="itemx_5_order" value="" placeholder="item 5">
<label>
<span class="tooltip">
<span class="icon">?</span>
<span class="content">This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.<br><br>If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).</span>
</span>
Flex Grow
</label>
<input type="text" class="number" name="itemx_0_flex-grow" value="" placeholder="All">
<input type="text" class="number" name="itemx_1_flex-grow" value="" placeholder="item 1">
<input type="text" class="number" name="itemx_2_flex-grow" value="" placeholder="item 2">
<input type="text" class="number" name="itemx_3_flex-grow" value="" placeholder="item 3">
<input type="text" class="number" name="itemx_4_flex-grow" value="" placeholder="item 4">
<input type="text" class="number" name="itemx_5_flex-grow" value="" placeholder="item 5">
<label>
<span class="tooltip">
<span class="icon">?</span>
<span class="content">This defines the ability for a flex item to shrink if necessary.</span>
</span>
Shrink
</label>
<input type="text" class="number" name="itemx_0_flex-shrink" value="" placeholder="All">
<input type="text" class="number" name="itemx_1_flex-shrink" value="" placeholder="item 1">
<input type="text" class="number" name="itemx_2_flex-shrink" value="" placeholder="item 2">
<input type="text" class="number" name="itemx_3_flex-shrink" value="" placeholder="item 3">
<input type="text" class="number" name="itemx_4_flex-shrink" value="" placeholder="item 4">
<input type="text" class="number" name="itemx_5_flex-shrink" value="" placeholder="item 5">
<label>
<span class="tooltip">
<span class="icon">?</span>
<span class="content">This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means "look at my width or height property" (which was temporarily done by the main-size keyword until deprecated). The content keyword means "size it based on the item's content" - this keyword isn't well supported yet, so it's hard to test and harder to know what its brethren max-content, min-content, and fit-content do.<br><br>If set to 0, the extra space around content isn't factored in. If set to auto, the extra space is distributed based on its flex-grow value.</span>
</span>
Flex Basis
</label>
<input type="text" class="number" name="itemx_0_flex-basis" value="" placeholder="All">
<input type="text" class="number" name="itemx_1_flex-basis" value="" placeholder="item 1">
<input type="text" class="number" name="itemx_2_flex-basis" value="" placeholder="item 2">
<input type="text" class="number" name="itemx_3_flex-basis" value="" placeholder="item 3">
<input type="text" class="number" name="itemx_4_flex-basis" value="" placeholder="item 4">
<input type="text" class="number" name="itemx_5_flex-basis" value="" placeholder="item 5">
<label>
<span class="tooltip">
<span class="icon">?</span>
<span class="content">It is recommended that you use this shorthand property rather than set the individual properties. The short hand sets the other values intelligently</span>
</span>
Flex
</label>
<code class="default">[ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ] or 'none'</code>
<input type="text" class="number" name="itemx_0_flex" value="" placeholder="All">
<input type="text" class="number" name="itemx_2_flex" value="" placeholder="item 1">
<input type="text" class="number" name="itemx_2_flex" value="" placeholder="item 2">
<input type="text" class="number" name="itemx_3_flex" value="" placeholder="item 3">
<input type="text" class="number" name="itemx_4_flex" value="" placeholder="item 4">
<input type="text" class="number" name="itemx_5_flex" value="" placeholder="item 5">
</div>
</form>
</div>
</section>
</div>
</div>
<style id="flex-styles">
</style>
<section id="code-container">
<button id="copy-to-clipboard">Copy to Clipboard</button>
<code id="CSScode">
/* CSS will appear here */
</code>
</section>
<section id="extra">
<h2>Other Properties</h2>
<div id="extra-container">
<div>
<h3>Container</h3>
<h4>flex-flow</h4>
<p>This is a shorthand flex-direction and flex-wrap properties, which together define the flex container's main and cross axes. Default is row nowrap.</p>
</div>
<div>
<h3>Item</h3>
<h4>flex</h4>
<p>This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto.</p>
</div>
</div>
<div id="source">
<a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/"><button id="">Info Source: css-tricks.com</button></a>
</div>
<div>
<small>Application: © Gorilla Group 2016</small>
</div>
</section>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script >
!function($) {
/* Switch between demo on top/on left */
$(function(){
$('select').on('change', function(){
if ($('#display option:selected').text() === 'null (block)'){
$('.main').addClass('column');
}
else if ($('#flex-direction option:selected').text() === 'column' || $('#flex-direction option:selected').text() === 'column-reverse') {
$('.main').addClass('column');
}
else {
$('.main').removeClass('column');
}
});
});
/* CSS generation */
$(function(){
$('select, input').on('change', function(){
var containerCSS = ".container { \n"
var itemsCSS = ".item { \n"
var additionalCSS = [];
var vals = decodeURI($('form').serialize());
var arrVals = vals.split('&');
for (var i = arrVals.length - 1; i >= 0; i--) {if (window.CP.shouldStopExecution(1)){break;}if (window.CP.shouldStopExecution(1)){break;}
var arrValsProp = arrVals[i].split('=');
if (arrValsProp[1] != "") {
arrValsProp[1] = arrValsProp[1].split("+").join(" "); //cleanup
if (arrValsProp[0].indexOf('itemx') < 0) {
containerCSS += "\t" + arrValsProp[0] + ": " + arrValsProp[1] + "; \n";
} else {
itemProps = arrValsProp[0].split("_");
if (itemProps[1] == "0") {
itemsCSS += "\t" + itemProps[2] + ": " + arrValsProp[1] + "; \n";
} else {
if (typeof additionalCSS[itemProps[1]-1] == "undefined" || additionalCSS[itemProps[1]] == "") {
additionalCSS[itemProps[1]-1] = ".item:nth-child(" + itemProps[1] + ") {\n";
additionalCSS[itemProps[1]-1] += "\t" + itemProps[2] + ": " + arrValsProp[1] + ";\n";
} else {
additionalCSS[itemProps[1]-1] += "\t" + itemProps[2] + ": " + arrValsProp[1] + ";\n";
}
}
}
}
}
window.CP.exitedLoop(1);
window.CP.exitedLoop(1);
var additionalCSS_string = "";
for (var i = 0; i <= 10; i++) {if (window.CP.shouldStopExecution(2)){break;}if (window.CP.shouldStopExecution(2)){break;} //i is dynamic so we need to surpass length and check if defined
if (typeof additionalCSS[i] != "undefined") {
additionalCSS_string += additionalCSS[i] + "\n} \n\n";
}
}
window.CP.exitedLoop(2);
window.CP.exitedLoop(2);
containerCSS += "}\n\n"
itemsCSS += "}\n\n"
$("#flex-styles, #CSScode").html(containerCSS + itemsCSS + additionalCSS_string);
});
});
/* Copy to Clipboard */
$(function(){
$('#copy-to-clipboard').click(function(){
copyToClipboard($('#CSScode'));
});
function copyToClipboard($source) {
var hiddenID = 'hidden-copy-text-input';
// create temporary hidden form element
if (!$('#'+hiddenID).length) {
$('body').append('<textarea style= "left: -8888px; position: absolute;" id="' + hiddenID + '">');
}
var $hidden = $('#'+hiddenID);
// put source text into hidden input
$hidden.val($source.text()).select();
// copy from hidden input
var success;
try {
success = document.execCommand("copy");
} catch(e) {
success = false;
}
return success;
}
});
}(window.jQuery);
//# sourceURL=pen.js
</script>
</body></html>
