Why use display: flex;?

Question

Why use display: flex;?

Answer

We can use flexbox, setting a container element to display: flex;, when we want to easily layout, align, and space items within said container in a single (horizontal or vertical) direction.

Some great use cases for flexbox:

  • laying out a collection of items vertically or horizontally, including dimensions and space between items
  • easily aligning items horizontally or vertically
2 Likes

If I set display: inline; in .gallery-item, then also I get the same effect ! But than how to align content in center ? Justify-content: center; inside .gallery doesn’t work here ?

1 Like

The reason being the absence of the flexbox. When using the flex command you are manipulating the flexbox and not the content inside. Think of it like organizing beads inside a cloth bag by manipulating the cloth bag(a rough analogy) as opposed to arranging the beads individually.

1 Like

I believe you will have to do the math use your margins correctly. Before learning this i did exactly that for images and had best success using the % value for the margins and the width and it made it a lot easier. Hope that helps