Creating Layout via Flex model

In this blog post, we will be talking about Drupal’s Flex Model and its core properties. 

There are 4 ways to creating web page layout:

1. Table

2. Float

3. CSS framework

4. Flex

Flex model layout is a CSS3 based property, that is implemented to create web page layouts. It is incredibly easy to achieve responsive layouts via Flex.

Nowadays, a majority of the content editors or site builders face issues related to, aligning and handling the items with equal width and height in a responsive site. Flex model addresses this issue effectively. 

By implementing flexbox, we can see to it that, it works perfectly irrespective of the screen size. And above all, flex is compatible with most of the modern browsers. Including IE (IE > 10).

Benefits of Flex model

1. Responsive Layout

2. Equal height for each item

3. Alignment can be top, middle and bottom

4. Reverse order

5. Custom order

All you have to do is, remember the 7 basics of the flex property, and there you go a responsive layout!

In order to familiarize oneself with Flexbox, we need to keep only 2 things in mind, flex container and flex items.

Flex-container is the parent element and flex-items are the child elements. 

In the example stated below, container class - flex-container and item class- flex-items.

7 core properties for achieving Flex model layout

1. Display: flex 

This property is applied to parent element where the flex model is to be applied. In our     case,we will apply this to the container element, as it is a parent element of our website.

CODE

<code> .container {   display: -webkit-flex;   display: flex;   width: 200px;   background: #ccc; } .item {   width: 100px;   background: #345f73;   margin: 10px; } <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> </div> </code>

OUTPUT

2. Flex-wrap: wrap or no-wrap 

This property is to be applied on the parent container. This property determines that we want to wrap the element based on the width of the container.

CODE

a. With flex-wrap: wrap property

<code> .container {   display: -webkit-flex;   display: flex;   width: 200px;   background: #ccc;   flex-wrap: wrap; } .item {   width: 100px;   background: #345f73;   margin: 10px;   height: 100px; } <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 2</div> </div> </code>

OUTPUT

b. With flex-wrap: no-wrap property

<code> .container {   display: -webkit-flex;   display: flex;   width: 200px;   background: #ccc;   flex-wrap: no-wrap; } .item {   width: 100px;   background: #345f73;   margin: 10px;   height: 100px; } <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 2</div> </div> </code>

OUTPUT

By looking at above two example of flex-wrap property you would understand how this property works and this way it is useful in creating a useful responsive layout.

3. Flex-direction: row-reverse:

The direction of the flex item in the flex container can be reversed using flex-direction: row-reverse.

CODE

OUTPUT

In the same way, if we want to display the flex items in a column and in reverse order, then we can display it using this:

CODE

OUTPUT

Now moving forward with the ordering of items, we will have a look at how to arrange items in custom order.

To arrange the block in custom order we use the flex model’s order property.

Change in the code is, that this property will be applied on the item (child) level.

4. Order

CODE

<code> .container {   display: -webkit-flex;   display: flex;   width: 240px;   background: #ccc; } .item {   width: 100px;   background: #345f73;   margin: 10px;   height: 100px;   color: white; } .item-2 {   order: -1;   background: #000; } <div class="container"> <div class="item item-1">Item 1</div> <div class="item item-2">Item 2</div> <div class="item item-3">Item 3</div> </div> </code>

OUTPUT

5. justify-content:

This property is implemented to, adjust the elements horizontally and can be applied on the parent element class i.e container too.

1. flex-start - this is the default value. The items will be started from the beginning.

2. flex-end - Items will be started from the end - This will not reverse the order of the items.

3. center - Items will appear in the center of the screen

4. space-between - this value will add space between two items.

5. space-around - this value will add space before and after the items.

The example below displays the center and space around, which would give a better understanding of this property.

CODE

a. justify-content: center

OUTPUT

b. Justify-content: space-around:

This would add a margin on left and right side to each element equally.

CODE

<code> .container {   display: -webkit-flex;   display: flex;   width: 600px;   height: 300px;   background: #ccc;   justify-content: space-around; } .item {   width: 100px;   background: #345f73;   margin: 10px;   height: 100px; } <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 2</div> </div> </code>

OUTPUT

6. align-items:

Another interesting property of flex model is align-items. This property can be used for adjusting the items vertically and has the following 5 parameters:.

1. stretch - all items will be stretched and will be in same height.

2. flex-start - items will start from the top of the container.

3. Flex-end - items will start from the bottom of the container.

4. Center - items will appear in the center of the container.

5. Baseline -items will appear at the baseline of the container.

CODE

align-items: center

OUTPUT

7. Flex: 

This property specifies the length of the flex item related to other flex items.In the following example, the first flex item will consume 2/4th of the free space, and the other two flex items will consume 1/4th of the free space each.

This property will be applied at the flex’s item level.

CODE

<code> .container {   display: -webkit-flex;   display: flex;   width: 600px;   height: 300px;   background: #ccc;   justify-content: space-around;   align-items: center; } .item {   width: 100px;   background: #345f73;   margin: 10px;   height: 100px; } <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 2</div> </div> </code>

OUTPUT