Basic Flexbox Reference
How do I make an basic flexbox reference?
[WIP] Setting up some basic examples of display: flex in a format that can be used later. What is a basic flexbox reference? How do you make a basic flexbox reference? This script and codes were developed by Matt Gross on 28 August 2022, Sunday.
Basic Flexbox Reference - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Basic Flexbox Reference</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="example control"> <div>one</div> <div>two</div> <div>three</div> <div>four</div>
</section>
<section class="example row"> <div>one</div> <div>two</div> <div>three</div> <div>four</div>
</section>
<section class="example row-reverse"> <div>one</div> <div>two</div> <div>three</div> <div>four</div>
</section>
<section class="example column"> <div>one</div> <div>two</div> <div>three</div> <div>four</div>
</section>
<section class="example column-reverse"> <div>one</div> <div>two</div> <div>three</div> <div>four</div>
</section>
<section class="example"> <div>one</div> <div>two</div> <div>three</div> <div>four</div>
</section>
<section class="example"> <div>one</div> <div>two</div> <div>three</div> <div>four</div>
</section>
</body>
</html>
Basic Flexbox Reference - Script Codes CSS Codes
section { width: 100%; min-height: 200px; background: #eee; margin-bottom: 10px;
}
div { padding: 30px;
}
div:first-child { background: #999; }
div:nth-child(2) { background: #777; }
div:nth-child(3) { background: #555; }
div:last-child { background: #333; }
section.row { display: flex; flex-direction: row;
}
section.row-reverse { display: flex; flex-direction: row-reverse;
}
section.column { display: flex; flex-direction: column;
}
section.column-reverse { display: flex; flex-direction: column-reverse;
}
Developer | Matt Gross |
Username | mattgrosswork |
Uploaded | August 28, 2022 |
Rating | 3 |
Size | 1,662 Kb |
Views | 36,432 |
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 |
Easy Lines Around a Subtitle | 1,807 Kb |
A Better underline | 2,120 Kb |
Circle Hovers | 1,586 Kb |
Working on a Volusion version of a Drupal Theme | 6,095 Kb |
Site Menu | 6,873 Kb |
Scared Eyes | 1,673 Kb |
Super Basic Inline Menu | 1,668 Kb |
Fiddling with css-only parallax | 2,996 Kb |
Playing with transition timing | 1,993 Kb |
CSS-Only Fly Menu | 3,744 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 |
Flex Chart | James_zedd | 4,111 Kb |
Background Images | Jooonebug | 2,100 Kb |
Revolving Text Landing Page Trial | TimRuby | 2,976 Kb |
Mobile Nav Menu | AliKlein | 4,745 Kb |
Vue.js | Thommyboy02 | 1,506 Kb |
Sample Profile Screen | OurDailyBread | 5,375 Kb |
React Recipe Box | Krokodill | 5,347 Kb |
CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
Starting out with Ember.JS | Cfleschhut | 4,808 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!