02 Apr CSS Flexbox
CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model for arranging items in rows or columns. It allows items to “flex” by expanding to fill extra space or shrinking to prevent overflow, making it essential for responsive web design.
A Flexbox layout is built from two key components and always consists of:
- Flex Container: The parent element where display: flex or display: inline-flex is applied.
- Flex Items: The direct child elements of the flex container, which automatically become flexible items.
Core Components
- Flex Container: The parent element created by setting display: flex or display: inline-flex.
- Flex Items: The direct children of the flex container.
- Main Axis: The primary axis along which items are laid out (horizontal by default).
- Cross Axis: The axis perpendicular to the main axis.
When to Use Flexbox vs. Grid
- Flexbox is best for one-dimensional layouts (a single row or column), such as navigation bars and centered components.
- CSS Grid is preferred for two-dimensional layouts (rows and columns simultaneously), such as full-page structures
Flex Container Properties
The following are the properties of a flex container:
- display: Defines the element as a flex container (display: flex or inline-flex). This enables flexbox layout for its children.
- flex-direction: Sets the direction of flex items (row, column, row-reverse, column-reverse). It controls the main axis orientation.
- flex-wrap: Determines whether flex items wrap onto multiple lines. Options are nowrap, wrap, or wrap-reverse.
- flex-flow: A shorthand combining flex-direction and flex-wrap. Example: flex-flow: row wrap.
- justify-content: Aligns items along the main axis (start, end, center, space-between, space-around, space-evenly). It distributes free space horizontally or vertically.
- align-items: Aligns items along the cross-axis (top to bottom if row). Options include stretch, flex-start, flex-end, center, and baseline.
- align-content: Aligns multiple lines of flex items along the cross-axis. Useful when there’s extra space in a multi-line flex container.
The following are the topics and properties to understand the Flexbox concept in CSS:
We will discuss them one by one with examples in the upcomg lessons.
If you liked the tutorial, spread the word and share the link and our website, Studyopedia, with others.
Read More:
No Comments