Category: CSS

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