Perfect understanding of align-items, align-content and justify-content in FlexBox with examples: Part 2

18th November 2018 0

In the previous article, we learnt about align-items property and briefly talked about align-content and justify-content properties.  In this article we will talk about justify-content and we will see how similar it is to align-items. The justify-content property Basically justify-content aligns individual items inside a flex container along the main axis.  Therefore what this means is…

By Azadeh

Perfect understanding of align-items, align-content and justify-content in FlexBox with examples: Part 1

17th November 2018 1

In this article we will be exploring align-content, align-items and justify-content properties in FlexBox. Then we compare them and will understand their differences and similarities. I have created a few pens to demonstrate the task as well.  align-content, align-items and justify-content similarities Generally the main purpose of these three properties in FlexBox is justify and alignment…

By Azadeh

Build a social profile card component using FlexBox

3rd November 2018 0

In this article we will demonstrate a social profile card component built and designed using FlexBox. The techniques look simple but it helps to improve our FlexBox knowledge to build more complex components.  I got the idea from freshman and tweaked it for our needs. This is the pen for what we are going to explain:…

By Azadeh

Difference between overflow-wrap and word-break with examples

2nd November 2018 0

Generally we could use overflow-wrap and word-break properties to break he words where needed. We will demonstrate the difference here and explain the different use cases. Overflow-wrap property Basically we have two values for this property: /* Keyword values */ overflow-wrap: normal; overflow-wrap: break-word; Using normal the word might only breaks if it needed to when…

By Azadeh

How to use background-size property in different use cases

1st November 2018 0

There was a situation where I had to manipulate background-size property in a different use case. Generally we all might have experienced where we had to use a non-responsive image as a background and try to fit it in with different techniques. Background-size property is a very useful property to adjust the image background when…

By Azadeh

Styling components in React without third-party libraries

27th October 2018 0

Basically three are three ways of styling components in React without using any other libraries like styled components. We will cover them all in this article with different examples. Style components with inline styling Generally we know inline styling as the very first and basic styling in CSS. It is perfectly safe and clean to…

By Azadeh