I don't understand "display:" properties

Get Help CSS
#1

Hi, i’m currently at “Challenge Project: Company Home Page with Flexbox” (https://www.codecademy.com/projects/practice/company-page-with-flexbox).

I’m 20% in the career path of the front-end and i still don’t understand the display properties like e.g. flexbox and inline block.

In the separat exercises it was easy to understand but using them by myself always feels like i know nothing about that. I find myself hours on hours changing all different values until something works but it is more like try and error than really to understand what im doing.

Does anyone have tipp’s or struggling with the same issue?

#2

I find these articles helpful - display | CSS-Tricks - CSS-Tricks
I’m about 24% through the front-end course. I used display : flexbox; for most of the challenge projects in this section.

1 Like
#3

Hello @stx182 ,

If you are just starting it might take some practice to get used to the display properties. Try changing one value at a time to see what it does, instead of multiple properties at once.

Flexbox Froggy is a fun little game for learning flex box.

#4

This really helped me. thjank you

#5

Hi

I leave here my project if you want to take a look, it took some time to make fully responsive, but the end result is pretty satisfying

feel free to take a look, download and use the code

To download use this link

best
Ilan

#6

Hello @stx182,

It’s kind complicated at the begining, but is not hard when you pratice a lot.

a quick review:

Both you will need to centralize or organize in rows and columns (I particularly prefer grid haha)

Grid
Usually you need to use:

.class{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); //you can also use : repeat(3,1f) / then that will repeat 3 times
gap: 20px;
place-items: center;
}

Flex
Usually you need to use:

.class{
display: flex;
align-items: center;
justify-content: center;
}