Flexbox Layout
How do I make an flexbox layout?
What is a flexbox layout? How do you make a flexbox layout? This script and codes were developed by David Klotz on 23 January 2023, Monday.
Flexbox Layout Previews
Flexbox Layout - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox Layout</title> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scaleable=no"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,300italic,600,600italic,700,700italic,800,800italic'>
<link rel='stylesheet prefetch' href='https://dl.dropboxusercontent.com/u/97609687/codepen/style.css'> <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 { background:#e8e8e9; padding:0% 5% 0px 5%;
}
.flex-container { padding: 10px; background: #fff; border-radius: 5px; margin: 45px auto; box-shadow: 0 1.5px 0 0 rgba(0,0,0,0.1);
}
.flex-container-tall { height:450px;
}
.fixed-height { height:280px;
}
.item { color: #fff; padding: 15px; margin: 5px; background: #3db5da; border-radius: 3px;
}
.item-left { margin-right:auto;
}
/* Flexbox CSS */
.flex { display:flex;
}
.flex-inline { display:inline-flex;
}
.row-reverse { flex-direction:row-reverse;
}
.flex-column { flex-direction:column;
}
.flex-column-reverse { flex-direction:column-reverse;
}
/* apply to container */
.flex-wrap { flex-wrap:wrap;
}
/* impotant! add fixed height to flex container for wrap columns */
.flex-wrap-column { flex-wrap: wrap; flex-direction:column;
}
/* default is "start" */
.jc-end { justify-content:flex-end;
}
.jc-center { justify-content:center;
}
.jc-between { justify-content:space-between;
}
.jc-around { justify-content:space-around;
}
/* Flex Order */
.order-first { order:-1;
}
.order-one { order:1;
}
.order-two { order:2;
}
/* Default is "0" */
.flex-grow { flex-grow:1;
}
.flex-grow-x2 { flex-grow:2;
}
.flex-grow-x3 { flex-grow:3;
}
.flex-basis { flex-basis:250px;
}
/* Flex grow, Flex basis, Flex Shrink shorthand
*/
.flex-shorthand { flex: 1 200px;
}
/* Default value is stretch. Apply to container */
.flex-start { align-items:flex-start;
}
.flex-end { align-items: flex-end;
}
.flex-center { align-items:flex-center;
}
.flex-self-start { align-self:flex-start;
}
.flex-self-end { align-self:flex-end;
}
.flex-self-center { align-self:center;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Flexbox Container</h1>
<!-- Flexbox Container -->
<h2>Flexbox container</h2> <div class="flex-container flex"> <div class="item-1 item">Item 1</div> <div class="item-2 item">Item 2</div> <div class="item-3 item">Item 3</div> <div class="item-4 item">Item 4</div> <div class="item-5 item">Item 5</div> <div class="item-6 item">Item 6</div> </div> <!-- End Flexbox Container -->
<!-- Flexbox Container -->
<h2>Inline Flex</h2> <div class="flex-container flex-inline"> <div class="item-1 item">Item 1</div> <div class="item-2 item">Item 2</div> <div class="item-3 item">Item 3</div> <div class="item-4 item">Item 4</div> <div class="item-5 item">Item 5</div> <div class="item-6 item">Item 6</div> </div> <!-- End Flexbox Container -->
<!-- Flexbox Container -->
<h2>Row Reverse</h2> <div class="flex-container flex row-reverse"> <div class="item-1 item">Item 1</div> <div class="item-2 item">Item 2</div> <div class="item-3 item">Item 3</div> <div class="item-4 item">Item 4</div> <div class="item-5 item">Item 5</div> <div class="item-6 item">Item 6</div> </div> <!-- End Flexbox Container -->
<!-- Flexbox Container -->
<h2>Flex-Direction</h2> <div class="flex-container flex flex-wrap flex-column fixed-height"> <div class="item-1 item">Item 1</div> <div class="item-2 item">Item 2</div> <div class="item-3 item">Item 3</div> <div class="item-4 item">Item 4</div> <div class="item-5 item">Item 5</div> <div class="item-6 item">Item 6</div> <div class="item-1 item">Item 1</div> <div class="item-2 item">Item 2</div> <div class="item-3 item">Item 3</div> <div class="item-4 item">Item 4</div> <div class="item-5 item">Item 5</div> <div class="item-6 item">Item 6</div> </div> <!-- End Flexbox Container -->
<!-- Flexbox Container -->
<h2>Justify Content End</h2> <div class="flex-container flex jc-end"> <div class="item-1 item">Item 1</div> <div class="item-2 item">Item 2</div> <div class="item-3 item">Item 3</div> <div class="item-4 item">Item 4</div> <div class="item-5 item">Item 5</div> <div class="item-6 item">Item 6</div> </div> <!-- End Flexbox Container -->
<!-- Flexbox Container -->
<h2>Justify Content Center</h2> <div class="flex-container flex jc-center"> <div class="item-1 item">Item 1</div> <div class="item-2 item">Item 2</div> <div class="item-3 item">Item 3</div> <div class="item-4 item">Item 4</div> <div class="item-5 item">Item 5</div> <div class="item-6 item">Item 6</div> </div> <!-- End Flexbox Container -->
<!-- Flexbox Container -->
<h2>Justify Content Space Between</h2> <div class="flex-container flex flex-wrap jc-between"> <div class="item-1 item">Item 1</div> <div class="item-2 item">Item 2</div> <div class="item-3 item">Item 3</div> <div class="item-4 item">Item 4</div> <div class="item-5 item">Item 5</div> <div class="item-6 item">Item 6</div> </div> <!-- End Flexbox Container -->
<!-- Flexbox Container -->
<h2>Justify Content Space Around</h2> <div class="flex-container flex jc-around"> <div class="item-1 item">Item 1</div> <div class="item-2 item">Item 2</div> <div class="item-3 item">Item 3</div> <div class="item-4 item">Item 4</div> <div class="item-5 item">Item 5</div> <div class="item-6 item">Item 6</div> </div> <!-- End Flexbox Container -->
<!-- Flexbox Container -->
<h2>Distribute Items</h2> <div class="flex-container flex jc-around"> <div class="item-1 item item-left">Item 1</div> <div class="item-2 item">Item 2</div> <div class="item-3 item">Item 3</div> <div class="item-4 item">Item 4</div> <div class="item-5 item">Item 5</div> <div class="item-6 item">Item 6</div> </div> <!-- End Flexbox Container -->
<!-- Flexbox Container -->
<h2>Distribute Items - Last to First</h2> <div class="flex-container flex jc-around"> <div class="item-1 item item-left">Item 1</div> <div class="item-2 item">Item 2</div> <div class="item-3 item">Item 3</div> <div class="item-4 item">Item 4</div> <div class="item-5 item">Item 5</div> <div class="item-6 item order-first">Item 6</div> </div> <!-- End Flexbox Container -->
<!-- Flexbox Container -->
<h2>Flex Grow Property</h2> <div class="flex-container flex flex-wrap"> <div class="item-1 item flex-grow">Item 1</div> <div class="item-2 item flex-grow">Item 2</div> <div class="item-3 item flex-grow">Item 3</div> <div class="item-4 item flex-grow">Item 4</div> <div class="item-5 item flex-grow">Item 5</div> <div class="item-6 item flex-grow">Item 6</div> </div> <!-- End Flexbox Container -->
<!-- Flexbox Container -->
<h2>Flex Grow Property sizes</h2> <div class="flex-container flex flex-wrap"> <div class="item-1 item flex-grow-x3">Item 1</div> <div class="item-2 item flex-grow">Item 2</div> </div> <!-- End Flexbox Container -->
<!-- Flexbox Container -->
<h2>Flex vertical align</h2> <div class="flex-container flex flex-wrap"> <div class="item-1 item flex-grow flex-basis">Item 1 <p>Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div> <div class="item-2 item flex-grow flex-basis">Item 2 <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div> <div class="item-2 item flex-grow flex-basis">Item 3 <p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div> <div class="item-2 item flex-grow flex-basis">Item 3 <p>Nullam id dolor.</p></div>
</div> <!-- End Flexbox Container -->
<!-- Flexbox Container -->
<h2>Flex start</h2> <div class="flex-container flex-container-tall flex flex-wrap flex-start"> <div class="item-1 item flex-grow flex-basis">Item 1 <p>Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div> <div class="item-2 item flex-grow flex-basis">Item 2 <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div> <div class="item-2 item flex-grow flex-basis">Item 3 <p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div> <div class="item-2 item flex-grow flex-basis">Item 3 <p>Nullam id dolor.</p></div>
</div> <!-- End Flexbox Container -->
<!-- Flexbox Container -->
<h2>Flex end</h2> <div class="flex-container flex-container-tall flex flex-wrap flex-end"> <div class="item-1 item flex-grow flex-basis">Item 1 <p>Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div> <div class="item-2 item flex-grow flex-basis">Item 2 <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div> <div class="item-2 item flex-grow flex-basis">Item 3 <p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div> <div class="item-2 item flex-grow flex-basis">Item 3 <p>Nullam id dolor.</p></div>
</div> <!-- End Flexbox Container -->
<!-- Flexbox Container -->
<h2>Flex center</h2> <div class="flex-container flex-container-tall flex flex-wrap"> <div class="item-1 item flex-grow flex-basis flex-self-center">Item 1 <p>Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div> <div class="item-2 item flex-grow flex-basis flex-self-center">Item 2 <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div> <div class="item-2 item flex-grow flex-basis flex-self-center">Item 3 <p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p></div> <div class="item-2 item flex-grow flex-basis flex-self-center">Item 3 <p>Nullam id dolor.</p></div>
</div> <!-- End Flexbox Container --> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
</body>
</html>
Flexbox Layout - Script Codes CSS Codes
body { background:#e8e8e9; padding:0% 5% 0px 5%;
}
.flex-container { padding: 10px; background: #fff; border-radius: 5px; margin: 45px auto; box-shadow: 0 1.5px 0 0 rgba(0,0,0,0.1);
}
.flex-container-tall { height:450px;
}
.fixed-height { height:280px;
}
.item { color: #fff; padding: 15px; margin: 5px; background: #3db5da; border-radius: 3px;
}
.item-left { margin-right:auto;
}
/* Flexbox CSS */
.flex { display:flex;
}
.flex-inline { display:inline-flex;
}
.row-reverse { flex-direction:row-reverse;
}
.flex-column { flex-direction:column;
}
.flex-column-reverse { flex-direction:column-reverse;
}
/* apply to container */
.flex-wrap { flex-wrap:wrap;
}
/* impotant! add fixed height to flex container for wrap columns */
.flex-wrap-column { flex-wrap: wrap; flex-direction:column;
}
/* default is "start" */
.jc-end { justify-content:flex-end;
}
.jc-center { justify-content:center;
}
.jc-between { justify-content:space-between;
}
.jc-around { justify-content:space-around;
}
/* Flex Order */
.order-first { order:-1;
}
.order-one { order:1;
}
.order-two { order:2;
}
/* Default is "0" */
.flex-grow { flex-grow:1;
}
.flex-grow-x2 { flex-grow:2;
}
.flex-grow-x3 { flex-grow:3;
}
.flex-basis { flex-basis:250px;
}
/* Flex grow, Flex basis, Flex Shrink shorthand
*/
.flex-shorthand { flex: 1 200px;
}
/* Default value is stretch. Apply to container */
.flex-start { align-items:flex-start;
}
.flex-end { align-items: flex-end;
}
.flex-center { align-items:flex-center;
}
.flex-self-start { align-self:flex-start;
}
.flex-self-end { align-self:flex-end;
}
.flex-self-center { align-self:center;
}
| Developer | David Klotz |
| Username | dkdesign |
| Uploaded | January 23, 2023 |
| Rating | 3 |
| Size | 3,647 Kb |
| Views | 6,072 |
Do you need developer help for Flexbox Layout?
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!
David Klotz (dkdesign) Script Codes
| Name | Size |
| CSS Transitions Transforms Reveal v1.0 | 4,083 Kb |
| A Pen by David Klotz | 5,064 Kb |
| Responsive Testimonial Slider v1.0 | 3,802 Kb |
| Flexbox Media Object | 3,221 Kb |
| Tout Pattern | 3,136 Kb |
| Basic Fullscreen Hero | 3,040 Kb |
| Tout with hover content | 3,138 Kb |
| Flexbox Layout | 3,647 Kb |
| Tout box hover content overlay | 4,242 Kb |
| My Starter Kit For Codepen | 2,012 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| Em Test | Rodesco | 1,784 Kb |
| Working around OS X Dynamic Scrollbars | Jrjenk | 2,279 Kb |
| SVG Icons Template | Legofsalmon | 2,618 Kb |
| Infractions - Attitude | Kylie_Joseph | 7,672 Kb |
| Birthday Party Starter | Aussieyang | 1,629 Kb |
| CSS background-size - GSAP | Jonathan | 2,209 Kb |
| Video mute | Leon9208 | 2,131 Kb |
| Toggling Divs with jQuery | Yying6 | 1,967 Kb |
| Social Profiles | Lachlanjc | 1,939 Kb |
| Cars going | Netoguimaraes | 1,699 Kb |
Do you want hide your ip address?
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!