CodePen Embed - CSS Flexbox Generator

<a class="link" href="https://fjolt.com/article/a-guide-to-css-flexbox" target="_blank">Original Article</a>
                                                           <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;800&display=swap" rel="stylesheet">
<h2>Create Your Flexbox</h2>
<div class="select-flex">
    <div class="select-option">
        <p>align-items:</p>
        <select data-id="select-4" class="main-selector">
            <option value="align-items: normal;">normal</option>
            <option value="align-items: baseline;">baseline</option>
            <option value="align-items: center;">center</option>
            <option value="align-items: flex-start;">flex-start</option>
            <option value="align-items: flex-end;">flex-end</option>
        </select>
    </div>
    <div class="select-option">
        <p>justify-content:</p>
        <select data-id="select-4" class="main-selector">
            <option value="justify-content: flex-start;">flex-start</option>
            <option value="justify-content: flex-end;">flex-end</option>
            <option value="justify-content: center;">center</option>
            <option value="justify-content: space-around;">space-around</option>
            <option value="justify-content: space-between;">space-between</option>
            <option value="justify-content: space-evenly;">space-evenly</option>
            <option value="justify-content: stretch;">stretch</option>
        </select>
    </div>
    <div class="select-option">
        <p>flex-direction:</p>
        <select data-id="select-4" class="main-selector">
            <option value="flex-direction: row;">row</option>
            <option value="flex-direction: row-reverse;"">row-reverse</option>
            <option value="flex-direction: column;">column</option>
            <option value="flex-direction: column-reverse;">column-reverse</option>
        </select>
    </div>
    <h3>For items..</h3>
    <div class="select-option">
        <p>flex-grow:</p>
        <select data-id="select-4" class="main-selector-item">
            <option value="flex-grow: 0;">0</option>
            <option value="flex-grow: 1;">1</option>
        </select>
    </div>
</div>
<div class="example-flex" data-id="select-4">
    <div style="height: 128px;" class="miniature-box">1</div>
    <div style="height: 48px;" class="miniature-box">2</div>
    <div style="height: 32px;" class="miniature-box">3</div>
    <div style="height: 64px;" class="miniature-box">4</div>
</div>
<div class="html-css-pair">
    <pre><code class="css" data-id="select-4">
.container {
    display: flex;
    align-items: normal;
    flex-direction: row;
    justify-content: flex-start;
}
    </code></pre>
    <pre><code class="html">
&lt;div class="container">
    &lt;div class="item">1&lt;/div>
    &lt;div class="item">2&lt;/div>
    &lt;div class="item">3&lt;/div>
    &lt;div class="item">4&lt;/div>
&lt;/div>
    </code></pre>
</div>
    <pre class="items"><code class="css" data-id="select-4">
.item {
    flex-grow: 0;
}
    </code></pre>

                                                           
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap" rel="stylesheet">


body {
  background: rgb(15 19 22);
  color: white;
  padding: 1rem 2rem;
  font-family: Inter, sans-serif;
}

.link {
  color: white;
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-size: 1.25rem;
  background: #3c874c;
  color: white;
  font-family: 'Silkscreen', cursive;
  text-align: center;
  text-decoration: none;
  margin-bottom: 2rem;
  display: block;
  padding: 0.5rem;
  font-size: 1.5rem;
  box-shadow: 0 4px 0 #204c2d, 0 -4px #64ca55, 4px 0 #316c42, -4px 0 #316c42, 0 -7px black, 0 7px black, 7px 0 black, -7px 0 black, -7px 3px black, -7px -3px black, 7px 3px black, 7px -3px black, -3px 7px black, 3px 7px black, -3px -7px black, 3px -7px black;
  transform: scale(1);
  cursor: pointer;
}
.link:hover {
  opacity: 1;
}

.link:hover {
  background: #439356;
}
.link:active {
  background: #439356;
  box-shadow: 0 4px 0 #204c2d, 0 -4px #64ca55, 4px 0 #316c42, -4px 0 #316c42, 0 -7px white, 0 7px white, 7px 0 white, -7px 0 white, -7px 3px white, -7px -3px white, 7px 3px white, 7px -3px white, -3px 7px white, 3px 7px white, -3px -7px white, 3px -7px white;
  transform: scale(1.05);
}
h2 {
    font-variation-settings: "wght" 800;
    font-size: 1.75rem;
    flex-direction: row-reverse;
    display: flex;
    justify-content: flex-end;
    margin-top: 7rem;
    align-items: center;
    color: #74fa5f;
}
p {
    font-size: 1.25rem;
    line-height: 2.5rem;
    margin-bottom: 2rem;
    text-decoration: none;
    color: #ffffffd9;
    max-width: 100%;
}
    .example-flex {
        display: flex;
        padding: 0.5rem;
        margin: 1rem 0;
        background: #191f2b;
        border-radius: 14px;
        flex-wrap: wrap;
    }

    .miniature-box {
        width: 64px;
        height: 32px;
        border-radius: 10px;
        background: linear-gradient(45deg,#4d59ff,#0037ff);
        /* box-shadow: inset 0 2px #ffffff17, 0 2px 8px rgb(0 0 0 / 30%); */
        margin: 0.5rem;
        transition: all .2s ease-out;
        text-align: center;
        font-size: 1.25rem;
        line-height: 2rem;
        font-variation-settings: 'wght' 600;
        color: rgba(255,255,255,.5);
    }
    .highlighted {
        background: linear-gradient(45deg, #ff7600, #ffeb00);
        order: 0;
        color: rgba(0,0,0,0.6);
        transform: scale(1.1);
    }
    .select-option + h3 {
        margin: 1rem 0 0 0;
        font-size: 1rem !important;
    }
    .select-option {
        padding: 0.5rem 0;
        float: left;
        width: 100%;
        display: flex;
        margin: 0 0 0.5rem 0;
        align-items: center;
    }
    .select-option p {
        margin: 0 1rem 0 0;
        min-width: 160px;
        background: #121d357d;
        padding: 0 0 0 0.75rem;
    }
.select-option p {
    position: relative;
    z-index: 999;
    border-radius: 6px 0 0 6px;
    font-family: Inter, sans-serif;
    margin: 0 1rem 0 0;
    line-height: 2.5rem;
    background: #191f2b!important;
    min-width: 160px;
    padding: 0 0 0 0.75rem;
}
    .container {
        height: 300px;
        align-content: flex-start;
    }
.select-option p {
    margin: 0 1rem 0 0;
    min-width: 160px;
    background: #121d357d;
    padding: 0 0 0 0.75rem;
}
.select-option select {
    background: #2a3240;
    border-radius: 10px;
    padding-left: 2rem;
    color: white;
    text-transform: none;
    border: 1px solid #2b3240;
}
select {
    border: none;
    border-radius: 10px;
    padding: 0.5rem;
    font-family: Inter,sans-serif;
    background: #2f384a;
    color: #fff;
    text-transform: none;
    font-size: 1rem;
    font-variation-settings: "wght" 500;
    max-width: 400px;
}
.html-css-pair pre:first-of-type code {
    border-radius: 14px 0 0 14px;
}
.html-css-pair pre:first-of-type code {
    border: none;
    margin-top: 0;
    border-radius: 14px 0 0 14px;
    border-right: 1px solid #2e333e;
}
.html-css-pair pre:last-of-type code {
    border: none;
    margin-top: 0;
    border-radius: 0 14px 14px 0;
}
.plain-code, pre code {
    font-family: Menlo,Monaco,Courier New,monospace;
    left: 5px;
    margin-top: 0;
    overflow: auto;
    box-sizing: border-box;
    padding: 0 1.5rem 6.5rem;
    display: block;
    max-height: 500px;
    line-height: 1.5rem;
    border-radius: 10px;
    margin-bottom: 2rem;
    width: 100%;
    float: left;
    background: #191f2b;
    font-size: 1rem;
    max-width: 100%;
}
.html-css-pair pre {
    flex-grow: 1;
    max-width: 50%;
    margin-bottom: 0;
}
.html-css-pair {
    display: flex;
    width: calc(100% - 0rem);
    overflow: visible;
    border-radius: 10px;
    border-radius: 8px;
    overflow: hidden;
}.select-option+h3 {
    margin: 1rem 0 0 0;
    font-size: 1rem!important;
}


    document.addEventListener('DOMContentLoaded', function(e) {
        document.querySelectorAll('select').forEach(function(item) {
            item.addEventListener('change', function(e) {
                if(item.classList.contains('main-selector') || item.classList.contains('main-selector-item')) {
                    let thisId = item.getAttribute('data-id');
                    let css = `
    display: flex;
    flex-wrap: wrap;`;
                    let itemCss = '';
                    document.querySelectorAll('.main-selector').forEach(function(item) {
    css += `
    ${item.value}`;
                    });
                    document.querySelectorAll('.main-selector-item').forEach(function(item) {
    itemCss += `
    ${item.value}`;
                    });

                    document.querySelector(`.example-flex[data-id="${thisId}"]`).setAttribute('style', css);
                    document.querySelectorAll(`.example-flex[data-id="${thisId}"] > div`).forEach(function(item) {
                        let newStyle = item.getAttribute('style') + itemCss;
                        item.setAttribute('style', newStyle);
                    })
                    document.querySelector(`code[data-id="${thisId}"]`).textContent = `
.container {${css}
}`;
                    document.querySelector(`.items code[data-id="${thisId}"]`).textContent = `
.item {${itemCss}
}`;
                }  
                else if(item.classList.contains('item-selector')) {
                    let thisId = item.getAttribute('id');
                    let thisValue = this.value;
                    document.querySelector(`code[data-id="${thisId}"]`).textContent = `
.item {
    ${thisValue}
}`;
                    document.querySelector(`.example-flex[data-id="${thisId}"] .highlighted`).setAttribute('style', thisValue);
                }
                else {
                    let thisId = item.getAttribute('id');
                    let thisValue = this.value;
                    document.querySelector(`code[data-id="${thisId}"]`).textContent = `
.container {
    ${thisValue}
}`;
                    document.querySelector(`.example-flex[data-id="${thisId}"]`).setAttribute('style', thisValue);
                }
            });
        });
    });

This Pen is owned by smpnjn on CodePen.

See more by @smpnjn on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.