├── CNAME ├── favicon.jpg ├── index.js ├── style.css └── index.html /CNAME: -------------------------------------------------------------------------------- 1 | flexgenerator.com -------------------------------------------------------------------------------- /favicon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/flexbox-generator/master/favicon.jpg -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | var flexContainer = document.querySelector('#flex-container'); 3 | var flexDirection = document.querySelector("#flex-direction"); 4 | var flexWrap = document.querySelector("#flex-wrap"); 5 | var justifyContent = document.querySelector("#justify-content"); 6 | var alignItems = document.querySelector("#align-items"); 7 | var alignContent = document.querySelector("#align-content"); 8 | 9 | applyChanges(); 10 | generateCode(); 11 | attachEventListeners(); 12 | 13 | function attachEventListeners () { 14 | document 15 | .querySelectorAll(".setting") 16 | .forEach(element => { 17 | element.addEventListener("change", function () { 18 | applyChanges(); 19 | generateCode(); 20 | }); 21 | }) 22 | 23 | document.querySelector('#copy-css-button').addEventListener('click', e => { 24 | copyCSS(); 25 | e.target.innerHTML = 'Copied!'; 26 | }) 27 | } 28 | 29 | function applyChanges() { 30 | flexContainer.style.flexDirection = flexDirection.value; 31 | flexContainer.style.flexWrap = flexWrap.value; 32 | flexContainer.style.justifyContent = justifyContent.value; 33 | flexContainer.style.alignItems = alignItems.value; 34 | flexContainer.style.alignContent = alignContent.value; 35 | } 36 | 37 | function generateCode () { 38 | code = ` 39 | .flex-container { 40 | display: flex; 41 | flex-direction: ${flexDirection.value}; 42 | flex-wrap: ${flexWrap.value}; 43 | justify-content: ${justifyContent.value}; 44 | align-items: ${alignItems.value}; 45 | align-content: ${alignContent.value}; 46 | }`; 47 | document.querySelector('#code-preview').innerHTML = code; 48 | document.querySelector('#copy-css-button').innerHTML = 'Copy'; 49 | } 50 | 51 | function copyCSS () { 52 | const cssCode = document.querySelector('#code-preview').innerHTML; 53 | const textarea = document.createElement('textarea'); 54 | textarea.value = cssCode; 55 | document.body.appendChild(textarea); 56 | textarea.select(); 57 | document.execCommand('copy'); 58 | textarea.remove(); 59 | } 60 | })(); 61 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html, body { 6 | margin: 0px; 7 | padding: 0px; 8 | font-size: 14px; 9 | font-family: Arial, Helvetica, sans-serif; 10 | } 11 | 12 | h1 { 13 | text-align: center; 14 | margin: 30px; 15 | } 16 | 17 | #main { 18 | display: flex; 19 | flex-direction: row; 20 | flex-wrap: wrap; 21 | justify-content: space-between; 22 | align-items: stretch; 23 | } 24 | 25 | #view { 26 | min-width: 50%; 27 | display: flex; 28 | justify-content: center; 29 | align-items: center; 30 | flex-grow: 1; 31 | background: lightgray; 32 | margin: 5px; 33 | } 34 | 35 | #flex-container { 36 | background: lightskyblue; 37 | display: flex; 38 | flex-wrap: wrap; 39 | height: 400px; 40 | width: 400px; 41 | resize: both; 42 | overflow: scroll; 43 | margin: 0px auto; 44 | } 45 | 46 | .flex-item { 47 | cursor: pointer; 48 | padding: 20px; 49 | border: 1px solid #ccc; 50 | background: lightsalmon; 51 | } 52 | 53 | .flex-item p.number { 54 | text-align: center; 55 | margin: 0px; 56 | } 57 | 58 | #control { 59 | margin: 5px; 60 | display: flex; 61 | flex-direction: column; 62 | flex-wrap: wrap; 63 | flex-grow: 1; 64 | list-style-type: none; 65 | } 66 | 67 | #control li { 68 | display: grid; 69 | grid-template-columns: 1fr 1fr; 70 | margin-top: 5px; 71 | padding: 5px; 72 | border: 1px solid lightgray; 73 | } 74 | 75 | #control li:first-child { 76 | margin: 0px; 77 | } 78 | 79 | #control li .description { 80 | grid-column: 1 / span 2; 81 | color: gray; 82 | } 83 | 84 | button { 85 | cursor: pointer; 86 | } 87 | 88 | .generated-code-section { 89 | margin: 5px; 90 | } 91 | 92 | #code-preview { 93 | background: #333; 94 | color: white; 95 | padding: 0px 20px 20px; 96 | } 97 | 98 | /* helper classes */ 99 | .row { 100 | display: flex; 101 | } 102 | 103 | .column { 104 | display: flex; 105 | flex-direction: column; 106 | } 107 | 108 | footer { 109 | padding: 5px 0px 20px; 110 | text-align: center; 111 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | CSS Flexbox Generator 11 | 12 | 13 | 14 | 15 | 16 | 17 | 23 | 24 | 25 | 26 | 27 |

CSS Flexbox Generator

28 |
29 |
30 |
  • 31 | 32 | 38 |

    direction of content flow

    39 |
    • 40 |
  • 41 | 42 | 47 |

    controls how wrapping works

    48 |
    • 49 |
  • 50 | 51 | 59 |

    align along the content flow ( main direction )

    60 |
    • 61 |
  • 62 | 63 | 71 |

    vertical align within a line ( cross direction )

    72 |
    • 73 |
  • 74 | 75 | 83 |

    vertical align within container

    84 |
    • 85 |
    86 | 87 |
    88 |
    89 |
    90 |

    1

    91 |
    92 |
    93 |

    2

    94 |
    95 |
    96 |

    3

    97 |
    98 |
    99 |

    4

    100 |
    101 |
    102 |

    5

    103 |
    104 |
    105 |

    6

    106 |
    107 |
    108 |

    7

    109 |
    110 |
    111 |

    8

    112 |
    113 |
    114 |

    9

    115 |
    116 |
    117 |

    10

    118 |
    119 |
    120 |
    121 | 122 |
    123 | 124 |
    125 |

    126 | Generated CSS 127 | 128 |

    129 | 
    
130 |   
    
131 | 
132 |   
135 | 
136 |   
137 | 
138 | 
139 | 


--------------------------------------------------------------------------------