Learn the concept
Flexbox Layout
Flexbox is a one-dimensional layout system for arranging items in a row or column. Set display: flex on a container, then control direction with flex-direction, alignment with justify-content (main axis) and align-items (cross axis), and item sizing with flex-grow, flex-shrink, and flex-basis.
Flexbox provides powerful alignment and distribution of space among items in a container. It's best suited for one-dimensional layouts (either a row or a column), often used in conjunction with CSS Grid for overall page structure.\n\nContainer properties (parent):\n- display: flex — enables flex layout\n- flex-direction — row (default) | column | row-reverse | column-reverse\n- justify-content — main axis alignment (start, center, space-between, space-around, space-evenly)\n- align-items — cross axis alignment (stretch, start, center, end, baseline)\n- flex-wrap — nowrap (default) | wrap | wrap-reverse\n- gap — spacing between items (preferred over margins for consistent spacing)\n\nItem properties (children):\n- flex-grow — how much item should grow (0 = don't grow)\n- flex-shrink — how much item should shrink (1 = can shrink)\n- flex-basis — initial size before growing/shrinking\n- flex: 1 — shorthand for flex: 1 1 0% (grow equally)\n- align-self — override align-items for one item\n- Note on order property: While order can visually reorder items, it does not change their logical (DOM) order, which can impact accessibility for screen readers. Prioritize logical DOM order.\n\nUse Flexbox for:\n- Navigation bars\n- Centering content\n- Card layouts in a row\n- Form layouts\n- Any one-dimensional layout (e.g., within a CSS Grid cell)
/* Center anything */
.center {
display: flex;
justify-content: center;
align-items: center;
}
/* Navigation bar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
/* Equal-width columns */
.columns {
display: flex;
gap: 1rem;
}
.columns > * {
flex: 1; /* each child grows equally */
}
/* Sidebar + main content */
.layout {
display: flex;
}
.sidebar {
flex: 0 0 250px; /* fixed width, no grow/shrink */
}
.main {
flex: 1; /* takes remaining space */
}That aligns items horizontally and distributes space evenly, adapting to different screen widths.
Where images need to be centered vertically and horizontally within their containers, and wrap onto new lines as space decreases.
With an image, name, and details, where the content needs to be neatly arranged in a single column or row, with flexible spacing.
Develop a responsive product listing page using Flexbox for item arrangement and alignment.
Create a multi-level navigation menu that uses Flexbox for horizontal and vertical alignment, adapting to different screen sizes.
Netflix utilizes Flexbox for arranging content rows (e.g., movie posters) and aligning elements within individual movie cards, ensuring a consistent and responsive layout across various devices and screen sizes.
Airbnb employs Flexbox in its search results and listing pages to arrange property cards, filters, and other UI elements, allowing for flexible and adaptable designs that work well on both desktop and mobile.