Basics Of Flexbox 23rd Nov 2021

In this blog, we will learn about Flexbox Layout module which is also called Flexible Box. The "Flexbox Layout" (Flexible box) is a one-dimensional layout method ,and is a CSS concept,that aims at providing a more efficient way to arrange items in rows or columns.Since it is a one-dimensional layout model, it can manage either columns or rows.
The CSS Flexbox specification describes a layout with items (flex-items) inside a container (flex-container). These "flexed" items can be laid out in any direction i.e inline (row) or block (column) axis, thus providing a lot of flexibility when changing the size (width or height) of the screen or its orientation which makes it a great tool to use for responsive design systems.Flexbox Layout is a great technological advancement on the web.Remember, that flexbox is a whole module and not just a single property.It comprises of a lot of things including whole set of properties.

What is the main idea behind flexbox layout

Flex layout provides the capability to the "container" to alter its items’ width/height (and order) in a way that it can fill the available space in a best possible way.Like mentioned above,it's main aim is to provide a more efficient way to lay out, align and distribute space among items in a container. A flex container expands items to fill available free space or shrinks them to prevent overflow. Flexbox has been around since quite some time, and these days most of the modern browsers are supporting it. You can checkout the browser support here.

Can I Use - Flexbox

Basic understanding of flexbox layout and properties

A flex-container has two following axes:

• main axis - The main axis of a flex container is the primary axis along which flex items are arranged. Remember that, it is NOT necessarily horizontal; it depends on the flex-direction property.
• cross axis -The axis perpendicular to the main axis is called the cross axis. It's direction depends on the main axis direction.

There are few other terminologies you need to know

• main start and main-end - Flex items are laid within the container starting from main-start and flowing towards main-end.
• main size - A Flex Item's width or height,whichever is the main dimension is the item's main size.
• cross start and cross-end- Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.
• cross size- The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size.

Like mentioned earlier in this blog,flexbox is a whole module and not a single property.It involves lot of things including its whole set of properties.Some of these properties are meant for the container which is also a parent element and known as flex container.Then there are properties just meant to be applied on the children which are flex items. Lets look at a few properties that can be applied

Properties of the parent aka flex container

1).

Display

This property defines a flex container.It can be inline or block depending on the given value. It enables a flex context for all its direct children. A flex container,i.e the parent element, sets a new flex formatting context for its contents/children. Flex containers form a containing block for their contents exactly like block containers do.So both Flex containers and block containers are similar except that we use flex layout instead of block layout.There are differences between flex layout and block layout too.Eg below

• vertical-align- has no affect on flex item
• float- donot create floating of flex item
• clear- like float, clear too donot have any affect on flex item
• ::first-letter and ::first-line pseudo-elements do not apply to flex containers

Possible Values for display

• flex
• inline-flex

2).

flex-direction

The flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. This determines the direction in which flex items are laid out. Flexbox is (aside from optional wrapping) a single-direction layout concept i.e it's layout is in one dimension - either a row or a column

Possible Values for flex-direction

• row
• row-reverse
• column
• column-reverse

3).

flex-wrap

By default, flex items i.e the children try to fit in one line.If you have used MS word,notepad++ etc or any other similar documenting tool, you might have come across this functionality wherein you can wrap the text so that text flows to next line automatically after the text reaches a certain limit.The idea behind is that you dont have to scroll right and instead everything fits in the screen.Same way, we can utilise this property which would allow items to wrap as needed

Possible Values for flex-wrap

• wrap
• nowrap
• wrap-reverse

4).

flex-flow

Property flex flow is shorthand for the properties we saw i.e above properties 2 and 3 .It is shorthand for "flex-direction" and "flex-wrap"
Just so that you don't forget,you can think of flex flow as flex flow =flex-direction flex-wrap
I normally write shortcuts in one place like above so that it is easy to remember.Hope it helps you too..

If you want to understand flex-direction and flex wrap in more detail, I have written this blog What Is flexbox-direction and flex-wrap . I have tried to cover as many scenarios as possible. In that blog,I use same HTML and use different values for these flex-wrap and flex-direction properties so that you get an idea how browser displays the HTML to the user for different value of these properties. I capture the results in screenshot too,and have shared it in the blog,so that you can quickly see the result and don't need to type code of your own. (though I highly recommned you code parallely)

5).

justify-content

This property specifies how flex items are distributed along the main axis of the parent flex container.Possible values of this property are

Possible Values for flex-wrap

• flex-start
• flex-end
• center
• space-around
• space-between

One thing to note and remember above is that, justify content doesnot necessarily mean that it distributes items horizontally .Rather,what it means is that it distributes along the main axis. The main axis of the flex container itself is determined based on the flex-direction property as we learnt above.Check out my blog on What is justify-content property for more details.

6).

align items

This property specifies how flex items are laid out along the cross axis of the parent flex container.Possible values of this property are

Possible Values for flex-wrap

• stretch (which is default value too)
• flex-end
• flex-start
• center
• baseline

Like we saw with justify content property,this property distributes items along the cross-axis of the container.Now what is the cross-axis of the container is based on the flex-direction property .Check out my blog on?? What is align-items property for more details.

Properties of the children -Flex-Items

1).

order

This property is a sub-property of the Flexible Box Layout module. By default, flex items are laid out in the same order as they appear in the source document. However,you can control the way they appear using the order property.Check out my blog on. What is order property for more details.

2).

flex-grow

This property specifies how much space a flex-item inside the flex container will grow - along the main axis - w.r.t to its sibling items. This property takes a unitless value that is kind of a proportion. This value decides what amount of the available space inside the flex container the item should take up. In certain cases,prior to using flex layout, you might have used percentages to layout items in html.This is something similar

for eg,if for all items ,flex-grow has a value of 1, then every child/flex item will take equal size inside the container. If you were to give one of the children a value of 2, that child would take up twice as much space as the others. Check out my blog on?? What is flex grow property for more details.

3).

flex-shrink

This defines the ability for a flex item to shrink if necessary.The value it takes behaves like a "flex shrink factor" that would determine how much the flex item will have to shrink w.r.t to rest of the flex items in te flex container when there is no enough space left on the row

for eg,if for all items ,flex-grow has a value of 1, then every child/flex item will take equal size inside the container. If you were to give one of the children a value of 2, that child would take up twice as much space as the others.Check out my blog on What is flex shrink property for more details.

negative numers are invalid for both flex-shrink & flex-grow

4).

flex-basis

It specifies the initial size of the flex item, before any available space is distributed according to the flex factors. When omitted from the flex shorthand, its specified value is the length zero.This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword Check out my blog on What is flex-basis property for more details.

5).

flex

Property flex is shorthand for the properties we saw i.e above properties 2,3,&4 properties i.e it is shorthand for flex-grow,flex-shrink and flex basis.Just so that you don't forget,you can think of flex flow as flex =flex-grow flex-shrink flex-basis

Flexbox or Boostrap

I have written a separate blog comparing Bootstrap vs Flexbox layout modudle.Checkout my blog on Compare Flexbox With Bootstrap