Hey! Get your free ebook

The secrets to code 55% faster with a headless CMS.

Code and develop better, faster and getting more productivity by using a headless CMS. Learn what a headless CMS is, which are his benefits and how to improve your coding gaining total flexibility.

  I read and accept the privacy policy and I agree to receive emails from Codelia

The secrets to code 55% faster with a headless CMS

Some examples of CSS flexbox

Some examples of CSS flexbox

CSS Flexbox is one of the most popular modules for the CSS style. It is commonly used to build any complex layouts. When you add display: flex to the element, you are going to create a layout for your website. In this article, we are going to share with you some examples of the flexbox layouts with CSS.

These examples will give you some ideas on how you are going to create a layout with flexbox CSS. We are going to walk through some basic layout patterns that you can use for your website. Your HTML needs to contain an element with the class of container with several children.

Stretch All with Fixed Spacing

.container {

  display: flex;

}

.item {

  flex-grow: 1;

  height: 100px;

}

.item + .item {

  margin-left: 2%;

}

This is the most basic pattern with flexbox. You are going to get some boxes to stretch and also fill the full width. Increasing the flex-grow will add the amount of space of the element that is allowed to stretch.

Stretch Middle with Fixed Spacing

.container {

  display: flex;

}

.item {

  height: 100px;

  width: 100px; /* A fixed width as the default */

}

.item-center {

  flex-grow: 1; /* Set the middle element to grow and stretch */

}

.item + .item {

  margin-left: 2%;

}

This is another common pattern that you are going to apply on the top bar. In this situation, you want to stretch the middle element only, but you will keep the right and left sides fixed. We are going to use a fixed width, for example 100 px for an element that needs to stay static. Then, you can add the flex-grow: 1 on the element that wil stretch.

Alternating Grid

This is a layout pattern that can be used to create a grid that comes with some variation. For example, every row of two equal items with the same size, there will be an item which will take up the entire row.

.container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}

.item {

  width: 48%;

  height: 100px;

  margin-bottom: 2%;

}

.item:nth-child(3n) {

  width: 100%;

}

For getting this goal, we are going to do some steps, including:

1. Set the flex-wrap: wrap on the container

2. Set the justify-content: space-between on teh container. it can be used to create space between the elements

3. Set the width of every item to be 49% or less

4. Set the third item to have 100% width. It will fill out the entire row.

3x3 Grid

.container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}

.item {

  flex: 0 32%;

  height: 100px;

  margin-bottom: 2%; /* (100-32*3)/2 */

}

We are allowed to create a 3x3 grid by using the flex-grow. This property needs to be setup 0. The margins that are located between the items will be the leftovers from every row. In this example, the margin will be around 2%.

Graph: vertical bars

.container {

  display: flex;

  height: 300px;

  justify-content: space-between;

  align-items: flex-end;

}

.item { width: 14%; }

.item-1 { height: 40%; }

.item-2 { height: 50%; }

.item-3 { height: 60%; }

.item-4 { height: 20%; }

.item-5 { height: 30%; }

You are also allowed to use the flexbox for creating vertical bars. All you need to do is ust setting up the align-items of the container to be flex-end. Then, you also need to define the height of each bar. The flex-end property will ensure that the bars will be anchroed to the bottom part of the graph.

Vertical Stack (centered)

.container {

  display: flex;

  flex-direction: column;

  align-items: center;

}

.item {

  height: 40px;

  margin-bottom: 10px;

}

For making a vertical stack, you may want to make the items to run from top to bottom. You only need to change the overall flex-direction from row to column.

Masonry or Mosaic

/* Re-order items into rows */

.item:nth-child(3n+1) { order: 1; }

.item:nth-child(3n+2) { order: 2; }

.item:nth-child(3n) { order: 3; }

/* Force new columns */

.container::before,

.container::after {

  content: "";

  flex-basis: 100%;

  width: 0;

  order: 2;

}

You may find mosaic or masonry layouts all over the Internet. Flexbox can be used to create this layout by using CSS only. You can use the order property for changing in which the order elements can be rendered. We are going to combine this property with the use of the nth-child() selctor for ordering items depending on the original items. If you would like to create a masonry layout that comes with three columns, we will divide all of these items into 3 main groups. 

Back to Development

Related articles

Img

5 tips for owning multiple websites for one company

Running a website requires time and attention. But what happens if you have two or more websites t...

Continue reading  
Img

Top free content management system

Choose the best free content management system to develop a website is one of the most important things du...

Continue reading  
Img

The best CMS for developers

Web developers should use a fast and powerful CMS in order to develop their web projects. There are differ...

Continue reading  

Start using Codelia
for free

No credit card required

5 steps to speed up a website with an headless cms

Free Ebook

The secrets to code 55% faster with a headless CMS.

Download Now