A beginner’s guide to Flexbox

In this article, we will discuss about Flexbox. What is Flexbox and Why we should use this layout for user interface design? Let's start with why we should use layout models in user interface design.

Why we should use layout models?

As we all know that whatever we search today on the Internet, it comes in web pages. And in those web pages there is data about which we searched. Nowadays, technology has enabled us to browse the website on any screen. But the web page should be responsive irrespective of the size of the screen. That’s where responsive layout design comes into the picture. We can use CSS to make the page responsive, but if we go with this approach, then we have to code very complex and it's very frustrating to get working consistently and precisely across browsers as well. To solve whatever problem we face with the CSS approach. Programmers/developers invented proper responsive layout models available natively in the browser, out of which — Flexbox, CSS Grid became most popular and are widely supported across all platforms & browsers. With the help of these layout models, we can design a layout page of a web page and that too without JavaScript, which was not possible before. These also make the code easier to understand and maintain.

Now, We will precisely talk about Flexbox fundamentals.

What is Flexbox?

Flexbox is a one-dimensional layout system that we can use to create a row or a column axis layout. Flexbox helps us to make our web page design very easily. If we use Flexbox, we will not have to code complex and we don't have to use a lot of float and position properties in our CSS code. With the help of Flexbox layout, we can lay out and align elements horizontally or vertically and allocate space among items in a container, even when their size is unknown and/or dynamic. A flex container expands its items to fill available free space or shrinks them to prevent overflow.

Flexbox includes a number of properties that allow you to define a flexible box, as well as the behavior of the items inside it. First, you declare the flex container by applying display: flex or display: inline-flex to it. This establishes a new flex formatting context for its contents.

Lets checkout the flexbox layout with a small example:

HTML Page using Flexbox layout

Result:

Here, we specify that the container 1 & 3 “grow factor” is 1 and the container 2 & 4 is 3. The grow factor specifies how much the flex item grows relative to the rest of the flex items in the flex container. Let's know about few flexbox container properties which we can use while designing the user interface.

Flexbox container properties:

This property specifies how flex items are laid out in the flex container, by setting the direction of the flex container’s main axis. They can be laid out in two main directions, like rows horizontally or like columns vertically..flex-container {
-webkit-flex-direction: row;
flex-direction: row;
}

2. flex-wrap :

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property..flex-container 
{
flex-wrap: nowrap | wrap | wrap-reverse;
}

3. justify-content :

The justify-content property is used to align the flex items according to the main axis within a flexbox container..flex-container 
{
justify-content: center | space-around | space-between;
}

4. flex-grow :

This defines the ability for a flex item to grow if necessary..item 
{
flex-grow: 4;
}

5. flex-shrink :

This defines the ability for a flex item to shrink if necessary..item 
{
flex-shrink: 3;
}

6. align-items :

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. This property sets the default alignment for all flex items, including the anonymous ones..flex-container {
-webkit-align-items: stretch;
align-items: stretch |
center | baseline | flex-start | flex-end;
}

7. flex-basis :

The flex-basis property specifies the initial length of a flexible item. If the element is not a flexible item, the flex-basis property has no effect..item 
{
flex-basis: 100px;
}

8. flex-flow :

It will make the flexible items display in reverse order, and wrap if necessary:.item 
{
display: flex;
flex-flow: row-reverse wrap;
}

Apart from these properties, there are many properties in the Flexbox layout. We can use the properties as per our requirements and design the user interface.

With this, we come to an end to this blog. I hope you got a clear understanding of the Flexbox layout from this article.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store