CSS Flexbox Layout Examples
CSS Flexible Box Layout is also known as Flexbox. It is a CSS3 web layout model. Before this, we were using four layout modes:
Inline, Block, Table and Positioned
Flexbox is a very simple and effective method to make a flexible and reusable layouts. It makes a flexible and responsive layout structure without using float or positioning.
HTML
<div class="container"> <div>Box 1</div> <div>Box 2</div> <div>Box 3</div> <div>Box 4</div> <div>Box 5</div> </div>
CSS
.container {
display: flex;
flex-wrap: nowrap;
background-color: #2fb3d9;
}
.container > div {
background-color: #d2f5ff;
width: 200px;
margin: 15px;
font-size: 25px;
line-height:80px;
text-align: center;
}
Justify content property
HTML
<div class="container"> <div>Box 1</div> <div>Box 2</div> <div>Box 3</div> </div>
CSS
.container {
display: flex;
justify-content: center;
background-color:#ea547e;
}
.container > div {
background-color: #fde9ef;
width: 120px;
margin: 10px;
text-align: center;
line-height: 80px;
font-size: 25px;
}
Vertical and horizontal center align through flex property
HTML
<div class="container"> <div></div> </div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
height: 250px;
background-color: #ea547e;
}
.container>div {
background-color: #fde9ef;
color: white;
width: 100px;
height: 100px;
}
CSS flex align bottom property
HTML
<div class="container"> <div></div> </div>
.container {
display: flex;
justify-content: left;
align-items: flex-end;
height: 250px;
background-color: #ea547e;
padding:2px;
}
.container>div {
background-color: #fde9ef;
color: white;
width: 100px;
height: 100px;
}
flex grow property
HTML
<div class="container"> <div style="flex-grow: 1">Box 1</div> <div style="flex-grow: 1">Box 2</div> <div style="flex-grow: 8">Box 3</div> </div>
CSS
.container {
display: flex;
align-items: stretch;
background-color: #ea547e;
}
.container > div {
background-color: #fde9ef;
color: #000;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
CSS flex shrink Property
HTML
<div class="container"> <div style="background-color:#ea547e;"></div> <div style="background-color:#fb87a7;"></div> <div style="background-color:#f8e1b8;"></div> <div style="background-color:pink;"></div> </div>
CSS
.container {
width: 350px;
height: 100px;
display: -webkit-flex; /* Safari */
display: flex;
}
.container div {
-webkit-flex-grow: 1; /* Safari 6.1+ */
-webkit-flex-shrink: 1; /* Safari 6.1+ */
-webkit-flex-basis: 100px; /* Safari 6.1+ */
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
}
.container div:nth-of-type(2) {
-webkit-flex-shrink: 4; /* Safari 6.1+ */
flex-shrink: 4;
}
CSS flex- basis property
HTML
<div class="container"> <div style="background-color:#ea547e;">100px</div> <div style="background-color:#f992af;">200px</div> <div style="background-color:#ffb094;">100px</div> </div>
CSS
.container {
width: 300px;
height: 100px;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
display: flex;
}
.container div {
-webkit-flex-grow: 0; /* Safari 6.1+ */
-webkit-flex-shrink: 0; /* Safari 6.1+ */
-webkit-flex-basis: 100px; /* Safari 6.1+ */
flex-grow: 0;
flex-shrink: 0;
flex-basis: 100px;
color:#fff;
}
.container div:nth-of-type(2) {
-webkit-flex-basis: 200px; /* Safari 6.1+ */
flex-basis: 200px;
}
CSS flex order property
HTML
<div class="flex-container"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> </div>
CSS
.flex-container {
height: 150px;
width: 300px;
font-size: 32px;
display: -webkit-flex;
/* Safari */
display: flex;
/* Standard syntax */
}
.flex-container div {
width: 100px;
}
.item1 {
background: #f992af;
-webkit-order: 2;
/* Safari 6.1+ */
order: 2;
}
.item2 {
background: #ea547e;
-webkit-order: 1;
/* Safari 6.1+ */
order: 1;
}
.item3 {
background: #ffb094;
-webkit-order: 3;
/* Safari 6.1+ */
order: 3;
}
CSS flex direction property
HTML
<div class="container"> <div style="background-color:#ea547e;">A</div> <div style="background-color:#f992af;">B</div> <div style="background-color:#ffb094;">C</div> </div>
CSS
.container {
width: 300px;
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
}
.container div {
width: 100px;
height: 100px;
}
Build a responsive website layout with flexbox
HTML
<div class="wrapper"> <header class="header">Header</header> <article class="main"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </article> <aside class="aside aside-1">Aside 1</aside> <aside class="aside aside-2">Aside 2</aside> <footer class="footer">Footer</footer> </div>
CSS
.wrapper {
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
.header {
background: #f992af;
}
.footer {
background: #f35984;
}
.main {
text-align: left;
background: #fbecd1;
}
.aside-1 {
background: #fed4aa;
}
.aside-2 {
background: #fed4aa;
}
@media all and (min-width: 600px) {
.aside {
flex: 1 0 0;
}
}
@media all and (min-width: 800px) {
.main {
flex: 3 0px;
}
.aside-1 {
order: 1;
}
.main {
order: 2;
}
.aside-2 {
order: 3;
}
.footer {
order: 4;
}
}
Build a Responsive Form With Flexbox
HTML
<form> <ul class="container"> <li class="form-row"> <label for="name">Your Name</label> <input type="text" id="name"> </li> <li class="form-row"> <label for="townborn">City </label> <input type="text" id="townborn"> </li> <li class="form-row"> <label for="email">Email Address</label> <input type="email" id="email"> </li> <li class="form-row"> <button type="submit">Submit</button> </li> </ul> </form>
CSS
.container {
background-color: #fbe0e8;
list-style-type: none;
padding: 0;
border-radius: 3px;
}
.form-row {
display: flex;
justify-content: flex-end;
padding: .5em;
}
.form-row > label {
padding: .5em 1em .5em 0;
flex: 1;
}
.form-row > input {
flex: 2;
}
.form-row > input,
.form-row > button {
padding: .5em;
border:1px solid #f8a7be;
}
.form-row > button {
background: #ea547e;
color: white;
border: 0;
}
@media screen and (min-width: 768px) {
.form-row > input {
flex: 3;
}
}
@media screen and (min-width: 992px) {
.form-row > input {
flex: 4;
}
}
@media screen and (min-width: 1200px) {
.form-row > input {
flex: 5;
}
}
Vertical bar chart in flexbox CSS
HTML
<div class="container"> <div class="item item-1"></div> <div class="item item-2"></div> <div class="item item-3"></div> <div class="item item-4"></div> <div class="item item-5"></div> </div>
CSS
.container {
display: flex;
height: 300px;
justify-content: space-between;
align-items: flex-end;
}
.item { width: 17%; background-color:#ea547e; border-radius:5px; }
.item-1 { height: 40%; }
.item-2 { height: 50%; }
.item-3 { height: 60%; }
.item-4 { height: 20%; }
.item-5 { height: 30%; }
Horizontal bar chart in flexbox CSS
HTML
<div class="container"> <div class="item item-1"></div> <div class="item item-2"></div> <div class="item item-3"></div> <div class="item item-4"></div> <div class="item item-5"></div> </div>
CSS
.container {
display: flex;
height: 300px;
justify-content: space-between;
flex-direction: column;
}
.item { height: 16%; background-color:#ea547e; border-radius:5px; }
.item-1 { width: 40%; }
.item-2 { width: 50%; }
.item-3 { width: 60%; }
.item-4 { width: 20%; }
.item-5 { width: 30%; }
CSS FlexBox Commonly known as FlexBox, CSS Flexible Box Layout is a CSS3 web layout model that is handy in designing a user-friendly interface.
As we know, mainly all the web pages are written with the help of basic HTML and CSS.
HTML is only used to specify the logical structure and content of your website’s web page, and CSS gives design to your webpage. CSS defines colors, fonts, patterns, layouts, formatting, and styling.
CSS FlexBox is one of the ways to establish the design of HTML pages.
Why CSS FlexBox?
Among many ways to design your HTML pages, these are the benefits of CSS Flexbox over others that make it worth it. CSS Flexbox isn’t the first invention in this sector, but it’s definitely the best one to date.
It is instrumental in making the elements flexible to change according to the size of the screen.
It is useful in managing space, designing layouts, and aligning. It is preferred over Block Model and designed to make CSS3 capable of changing the width and height of the plan according to the size of the screen.
The CSS3 flexbox contents are the following:
Flex Container:
It specifies the property of the parent, and it can be notified by adjusting the display properties.
Flex Items:
It specifies the properties of children. There can be any number of flex items inside the flex container.
Properties
Some of the significant features of the CSS flexbox are here for everyone to know.
Display: Used to specify the type of box used for an element of HTML.
Flex-Direction: It is used to determine the direction of movement of flexible elements according to the size of the screen changes.
Justify-Content: This feature aligns the items horizontally when the things are not able or not allowed to use the space available for them on the central axis.
Align-Items: Opposite to justify-content, it aligns the items vertically in similar condition but on the cross-axis. These properties are beneficial in making responsive web pages.
Order: It is used to specify the order of a flexible item concerning other flexible things within the same container. You can also make your specific order in which the details appear. You can choose row-reverse and column-reverse to accomplish the above property.
Flex-Flow: Shorthand property for flex-wrap and flex-direction. This property is the best alternative to float-based grids.
Flex: Used to compare the length of a flex item concerning other flexible things inside the same container.
Align-Self: It is used to overrides the alignment properties of the container. It is only used for flex items.
Browser Supported
It supports many browsers, namely:
- Firefox browser
- Chrome Browser
- Browser IE
- Safari Browser
- Opera Browser
Summary
FlexBox is a modern way to design the layouts of HTML pages. It offers us many useful and valuable properties as compared to floats and other technologies. It is the best option for making layouts of modern websites.
It is and will be operational with all the devices, whether a phone, laptop, or projector.
