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!
I’ve edited the title for clarity.
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
It can also be compared to a table that contains cells sitting in front of each other horizontally or vertically.
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.
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
inline-block, but it will not be clear if you do not know the following:
block element sits alone.
inline-block elements sit together in a line.
- 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,
inline-block) will sit inside the 3 blocks set.
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.
Thank you! Yes I’ve learnt alignment and justification of content whilst I awaited your reply haha. Thank you for your help!
You’re welcome & Good Luck