CSS Basic Tutorial
CSS Flexbox
The display property in CSS is one of the most fundamental and powerful properties used to control the layout of elements on a web page. It defines how an element is rendered visually, and it affects the layout, positioning, and interaction with other elements on the page.
Displays an element as a block-level element. A block element takes up the full width of its parent container and starts on a new line.
<div>, <h1< - <h6> , <p>, <section>, etc.Displays an element as an inline element. Inline elements do not start on a new line, and they take up only as much width as their content.
<span>, <a>, <strong>, <em>, etc.Combines features of both inline and block. Like inline, it allows elements to sit next to each other without starting on a new line, but like block, you can set the width, height, and margins/padding.
Try it yourself
The element behaves like a block element (takes up the full width available), but its children are laid out using Flexbox.
The element behaves like an inline element (doesn't force a line break and takes only the necessary space), while its children are laid out using Flexbox.
The element behaves like a block element, taking up the full width available, while its child elements are laid out on a grid.
The element behaves like an inline element, taking up only the space necessary for its content (just like an inline element), while its children are laid out on a grid.
Try it yourself