Flexbox Test
How do I make an flexbox test?
Only in chrome atm.. What is a flexbox test? How do you make a flexbox test? This script and codes were developed by Nicholas M. Smith on 27 August 2022, Saturday.
Flexbox Test - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox Test</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="page-wrap"> <header><p>Header</p></header> <div class="banner"><p>Banner</p></div> <div class="content"> <aside class="aside-one"><p>Aside</p> </aside> <article> <p>Article</p> </article> <aside class="aside-two"><p>Aside 2</p> </aside> </div> <footer><p>Footer</p></footer>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Flexbox Test - Script Codes CSS Codes
.page-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; text-align: center;
}
.page-wrap > * { padding: 10px; flex: 1 100%; -webkit-flex: 1 100%;
}
header { background: #856453; order: 1; -webkit-order: 1;
}
.banner { background: #DEC632; padding: 100px 0; order: 4; -webkit-order: 4;
}
.content { background: white; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; order: 3; -webkit-order: 3;
}
article { flex: 1 auto; -webkit-flex: 1 auto; margin: auto; background: #6B3221; padding: 60px 20px; order: 1; -webkit-order: 1;
}
.aside-one { flex: 1 100%; -webkit-flex: 100%; background: #48ECC9; padding: 60px 20px; margin: auto; order: 2; -webkit-order: 2;
}
.aside-one p { color: white;
}
.aside-two { flex: 1 100%; -webkit-flex: 1 100%; background: #48ECC9; padding: 60px 20px; margin: auto; order: 3; -webkit-order: 3;
}
.aside-two p { color: white;
}
footer { background: black; order: 5; -webkit-order: 5;
}
footer p { color: white;
}
@media all and (min-width: 700px) { .banner { background: #DEC632; order: 2; -webkit-order: 2; } article { flex: 3 auto; -webkit-flex: 3 auto; order: 1; -webkit-order: 1; } .aside-one { flex: 1 auto; -webkit-flex: 1 auto; order: 1; -webkit-order: 1; } .aside-two { flex: 1 auto; -webkit-flex: 1 auto; order: 3; -webkit-order: 3; }
}
Developer | Nicholas M. Smith |
Username | icutpeople |
Uploaded | August 27, 2022 |
Rating | 3 |
Size | 2,486 Kb |
Views | 30,360 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
CSS Modal | 2,836 Kb |
Blur Image Hovers | 4,013 Kb |
SVG Hand Drawn Navicon | 3,313 Kb |
Animated Image Hovers | 3,687 Kb |
Flip Navicon | 2,701 Kb |
Mobile First Responsive Table | 4,026 Kb |
Floating Labels Form | 3,113 Kb |
Hover Effects | 3,521 Kb |
Pure CSS Minecraft Enderman | 4,258 Kb |
Button | 2,948 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Spilled Paint | Darrylhuffman | 3,894 Kb |
BenU Maintenance Site | Ksherman | 4,893 Kb |
Calculator | Rzencoder | 4,572 Kb |
CSS3 Butterfly | Timohausmann | 3,430 Kb |
Pruebas de d3.js | Juanmanuelcarnerero | 2,485 Kb |
CSS Letter animations | Sladix | 2,116 Kb |
A Pen by Moeid Saleem | Moeidsaleem | 1,862 Kb |
A Pen by utcwebdev | Utcwebdev | 2,856 Kb |
Full page table inside the grid | Twikito | 1,864 Kb |
Spiralator 9000 | AdmiralPotato | 4,671 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!