CSS Flexbox Layout Examples

CSS Flexible Box Layout 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 very simple and effective method to make flexible and reusable layout. It makes flexible and responsive layout structure without using float or positioning.

css flexbox examples
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 propertycss flex 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 propertyvertical and horizontal center align through flex

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 propertyCSS align bottom flex 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 propertycss 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 PropertyCSS 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 propertyCSS 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 propertyCSS 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 propertycss 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 flexboxbuild responsive website layout 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 FlexboxBuild 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 CSSVertical 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 CSShorizontal 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. CSS Flexbox isn’t the first invention in this sector, but it’s definitely the best one till 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 alignments. 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 appears. 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 a projector.

Leave a Reply

Your email address will not be published. Required fields are marked *