Playing with FlexBox

Developer
Billy Brown
Size
3,162 Kb
Views
18,207

How do I make an playing with flexbox?

Just learning flexbox through using it. Just! Make! Websiiiites!. What is a playing with flexbox? How do you make a playing with flexbox? This script and codes were developed by Billy Brown on 30 September 2022, Friday.

Playing with FlexBox Previews
IQ Test

Playing with FlexBox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Playing with FlexBox</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { display: flex; flex-direction: row; flex-wrap: wrap;
}
.box { background: #eee; border: 1px solid #ccc; border-radius: 0.25em; margin: 0.5em; padding: 1em;
}
.header { align-self: flex-start;
}
.nav,
.sidebar,
.content { flex: 1;
}
.content { flex: 4;
}
.sidebar { flex: 2;
}
.header,
.footer { flex: 100%; text-align: center;
}
dl * { margin: 1em inherit;
}
@media (max-width: 50em) { .nav { flex: 100%; } .nav li { display: inline; }
}
@media (max-width: 36em) { .content, .sidebar { flex: 100%; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="box header"><h1>Header</h1></div>
<div class="box nav"> <h2>Nav</h2> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> </ul>
</div>
<div class="box content"> <h1>HTML Ipsum Presents</h1> <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> <h2>Header Level 2</h2> <ol> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </ol> <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote> <h3>Header Level 3</h3> <ul> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> </ul>
<pre><code>
#header h1 a { display: block; width: 300px; height: 80px;
}
</code></pre>
</div>
<div class="box sidebar"> <h2>Sidebar</h2> <dl> <dt>Definition list</dt> <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd> <dt>Lorem ipsum dolor sit amet</dt> <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</dd>
</dl>
</div>
<div class="box footer">&copy; Druid of Lûhn 2012</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Playing with FlexBox - Script Codes CSS Codes

body { display: flex; flex-direction: row; flex-wrap: wrap;
}
.box { background: #eee; border: 1px solid #ccc; border-radius: 0.25em; margin: 0.5em; padding: 1em;
}
.header { align-self: flex-start;
}
.nav,
.sidebar,
.content { flex: 1;
}
.content { flex: 4;
}
.sidebar { flex: 2;
}
.header,
.footer { flex: 100%; text-align: center;
}
dl * { margin: 1em inherit;
}
@media (max-width: 50em) { .nav { flex: 100%; } .nav li { display: inline; }
}
@media (max-width: 36em) { .content, .sidebar { flex: 100%; }
}

Playing with FlexBox - Script Codes JS Codes

/*
I'm thinking of adding an option
to change between layout. Tell me
what you think in the comments.
*/
Playing with FlexBox - Script Codes
Playing with FlexBox - Script Codes
Home Page Home
Developer Billy Brown
Username _Billy_Brown
Uploaded September 30, 2022
Rating 3
Size 3,162 Kb
Views 18,207
Do you need developer help for Playing with FlexBox?

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!

Billy Brown (_Billy_Brown) Script Codes
Name
Single Element 8-bit characters
Cropper.js example
Better Transparent input boxes
JavaScript Inheritance
Mandelbrot Fractal
A Pen by Billy Brown
Number game
Slideout Sidebar
Chaos
CSS-Tricks lodge button
Create amazing video scripts with AI!

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!