Block makes an element start on a new line and take up the full available width by default.

inline-block keeps the element inline (no new line) but still allows you to set width and height.

Flex makes the element behave like a block-level container and enables flexbox layout for its children, allowing advanced alignment and spacing control.

Inline-flex works like flex (flexbox for the children) but the element itself behaves inline instead of starting on a new line.

You can change the layouts better for responsive purpose. For example when you have a 4 column row it often looks bad on tablet. Using divs I change the colums to vertical sooner so it all shows good. dozens of ways to use the divs. Often also divs in divs to get the behavior I want.

Just play with it to see what it does, its quite powerfull. Also for backgrounds behind an element.

Hi PhoenixGB,

Thanks for reaching out to us.

Robert’s explanation about block, inline-block, and flex is technically correct — those control layout behavior and responsiveness.

However, they won’t create true text wrapping. If your goal is to have text flow around an image or dynamic content box (magazine-style), you’ll need to use float: left; or float: right;, and make sure both elements are inside the same column.

Please, share your url with me. Let me check your rendered blocks.

Thanks