apaCara
.com
editor
HTML
CSS
JS
PREVIEW
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS Flexbox Demo</title> <style> .flex-container { height: 500px; background: #ddd; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: center; } .flex-item { width: 100px; height: 100px; background: tomato; margin: 2px; } </style> </head> <body> <div class="flex-container"> <div class="flex-item flex-item-1">flex-item 1</div> <div class="flex-item flex-item-2">flex-item 2</div> <div class="flex-item flex-item-3">flex-item 3</div> <div class="flex-item flex-item-4">flex-item 4</div> <div class="flex-item flex-item-5">flex-item 5</div> <div class="flex-item flex-item-6">flex-item 6</div> <div class="flex-item flex-item-7">flex-item 7</div> <div class="flex-item flex-item-8">flex-item 8</div> <div class="flex-item flex-item-9">flex-item 9</div> <div class="flex-item flex-item-10">flex-item 10</div> <div class="flex-item flex-item-11">flex-item 11</div> <div class="flex-item flex-item-12">flex-item 12</div> <div class="flex-item flex-item-13">flex-item 13</div> <div class="flex-item flex-item-14">flex-item 14</div> <div class="flex-item flex-item-15">flex-item 15</div> </div> </body> </html>
/* CSS code */
// javascript code