Flexbox, what exactly is it?

HTML-CSS
1

Hi guys,

I don’t want to sound silly here but I’m having a hard time grasping the flex property. Is it a dynamic variant between inline and block or is it variable between inline and block? At least that’s what I’m understanding from the current tutorials. (Only 3 in)

I’d appreciate any and all help!
Thanks,
Ale8k

I’ve edited the title for clarity.

2

Flex helps you create one-dimensional layouts: either a row or a column at a time.

For rows, it can be compare it to when you float divs on to the left in order to make them appear side by side (or by adding to them the display of inline-block).

It can also be compared to a table that contains cells sitting in front of each other horizontally or vertically.

3

I appreciate the answer but I don’t want to know it’s uses yet. Just how it relates to block and in-line block because I really don’t understand it, yet.

4

Your question was not very clear. But, in general, its uses cannot be separated from how it relates to something else.

My answer is a response to how flex relates to block and inline-block, but it will not be clear if you do not know the following:

  1. That block element sits alone.
  2. inline-block elements sit together in a line.
  3. Flex make elements sit together in a line (or columns) but inside a created flex block: if you set 3 blocks, elements (it doesn’t matter how the individual elements are, block or inline-block) will sit inside the 3 blocks set.
5

Ah so it’s effectively a way to group content?

My understanding was that inline places all elements inline (alike text) but must be individually set or default as inline.

Block treats them like rectangles which span the entire width of the page, as such we can specify the width and height. (Unlike inline which wouldn’t make sense to).

Finally inline-block flows block elements, still in their rectangle based containers but in a textual line? So they no longer span the width of the page, but their container instead.

Am I on the right lines with this? Finally, I think I understand flex maybe. Flex groups them into a specified area, vertical or horizontal columns? How would width and height implications work if this is how flex works?

I am trying my best to understand, so if I’m wrong again please excuse me aha.

6

  1. Yes to group content in a row or a column at a time: you can see the following, it contains examples of how elements appear when flexed.

  2. Yes, you are right, that’s the difference between inline, block and inline-block.

  3. And, For flex, there are other properties you will learn (if you haven’t yet), you will use them to change the length, height, space, direction alignment of elements…etc.

7

Thank you! Yes I’ve learnt alignment and justification of content whilst I awaited your reply haha. Thank you for your help!

8

You’re welcome & Good Luck :+1:

9