Flexbox grow, shrink and basis
How do I make an flexbox grow, shrink and basis?
A quick demo to show the flex-grow, shrink and basis properties.. What is a flexbox grow, shrink and basis? How do you make a flexbox grow, shrink and basis? This script and codes were developed by Andreas Neeven on 18 September 2022, Sunday.
Flexbox grow, shrink and basis - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox grow, shrink and basis</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="container"> <div class="item item-1"><span>1</span></div> <div class="item item-2"><span>2</span></div> <div class="item item-3"><span>3</span></div>
</div>
</body>
</html>
Flexbox grow, shrink and basis - Script Codes CSS Codes
.container { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; width: 800px; height: 100%; background-color: #333; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 50px;
}
.item { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100px; height: 200px; color: white; margin-right: 25px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.item span { font-size: 24px;
}
/* FLEX-GROW DEFAULT "0" */
/* FLEX-SHRINK DEFAULT "1" */
/* FLEX-BASIS DEFAULT "auto" */
/* FLEX DEFAULT "0 1 auto" */
.item-1 { background-color: #f1c40f; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; /* flex-basis: 300px;*/ -ms-flex: 1 100%; flex: 1 100%;
}
.item-2 { background-color: #9b59b6; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-negative: 3; flex-shrink: 3;
}
.item-3 { background-color: #1abc9c; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1;
}
Developer | Andreas Neeven |
Username | aneeven |
Uploaded | September 18, 2022 |
Rating | 3 |
Size | 2,305 Kb |
Views | 26,312 |
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 |
Yet another card... | 3,819 Kb |
Some card animation | 2,518 Kb |
SVG Heart Animation | 2,753 Kb |
Flexbox Demo | 2,648 Kb |
Sass loop | 2,652 Kb |
Flexbox Order | 2,117 Kb |
Mail Element Concept | 3,609 Kb |
Yay for blend-modes | 2,443 Kb |
Custom Profile | 2,533 Kb |
Flexbox align | 2,098 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 |
Perforated foil | 0x04 | 2,617 Kb |
Image grid with captions | Mchernin34 | 2,222 Kb |
CSS3 Snow Animation | NickyCDK | 1,695 Kb |
Animating characters with jQuery | 042 | 2,776 Kb |
Comparison of Roboto Draft vs Roboto | Jxnblk | 2,880 Kb |
Mondrian | Chrisarmstrong | 2,787 Kb |
CSS Org Chart | Appirio-ux | 3,882 Kb |
Simple Flat Menu | Jeplaa | 2,467 Kb |
A Pen by Alex Bergin | Abergin | 3,347 Kb |
CSS Bot Confusion | Jpod | 3,456 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!