Let’s rewind back the clock a little, when complex alignments of elements in a web design was an arduous task. Be it juxtaposing the thumbnails besides the text or making two equal columns with different content quantity.

It was always buggy and never semantic. Floats, positions and heights were the only few tools available to mankind, and where divs and sections felt helpless, we had to use tables.Well, that’s all past now, as we have FLexbox CSS to deal with the aforesaid predicament for the front-end developers.

So what is Flexbox CSS

Well to define it very succinctly,

“It is a single line of css code to be applied to the parent class for aligning it’s immediate children in whatever way you would like. Be it horizontally or vertically.”

Disclaimer:

Just know that the flex property has to be applied to the immediate parent of the columns/rows/wraps you are trying to flex.

Terminology

CSS Flexbox is replete with properties and terminologies pertaining to both the parent and its child. But in an ideal world, not all of them have equal chance of being used. We live in the age of Bootstrap and Divi builder where the cake is already baked. We just need to add a layer of sweet icing.

To get started with flexbox, we need to give the parent the following css. Again, these classes are only for the parent class. I use this 90% of the times to achieve desired structure.

  • Display:flex
  • Flex-wrap:wrap
  • Align-items:center
  • Flex-direction:column (Optional. Since it is already by default.)

Now let me explain what do they each do:

Display:flex

This class makes the parent a flex container which is the first and foremost condition of applying Flexbox CSS. After you have done this, the immediate children to the parent becomes flex items.

Effect

Now what will happen is that all the flex-items would now have the same height irrespective of the quantity of content in those items. This is magic and what exactly we need in todays creative and modern web design environment.

Flex-wrap: wrap

If you will write the above code then the flex-items would get stacked one over the other just like we want them to for mobile responsiveness. If, rather then ‘wrap’ you write ‘no-wrap’ then the items won’t get stacked but would just be fluid juxtaposed to each other.

Effect

This is for stacking divs one over the other for mobile responsiveness

Algin-items:center

This is an excellent property to align items vertically center.

Flex-direction:column

This property is to tell the parent in which direction to align it’s children. By default, it aligns them horizontally. You can also align them vertically depending upon your web design requirement.

  • Need a WordPress website for your business?

    Sure. Lets cut to the chase.