Skip to content

Commit aeee800

Browse files
ajay-dhangarajay-dhangar
committed
Done Layout docs
1 parent 47f5a20 commit aeee800

File tree

7 files changed

+929
-7
lines changed

7 files changed

+929
-7
lines changed

‎docs/css/layout/modern-layouts/container-queries.mdx‎

Lines changed: 98 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,98 @@
1-
<ComingSoon />
1+
---
2+
title: "Container Queries (Container Style)"
3+
description: "Master CSS Container Queries, which allow components to adapt their layout based on the size of their parent container, not just the viewport, solving the 'component portability' problem."
4+
keywords: [CSS Container Queries, container, component-driven design, container-type, responsive design, component portability]
5+
tags: [CSS Container Queries, container, component-driven design, container-type, responsive design, component portability]
6+
sidebar_label: Container Queries
7+
---
8+
9+
Container Queries are one of the most significant modern advancements in CSS layout. They allow you to make elements responsive based on the size of their **parent container**, rather than the entire browser viewport (which is what traditional media queries do).
10+
11+
This solves the long-standing "component portability" problem: How should a component look if it's placed in a narrow sidebar versus a wide main content area?
12+
13+
<AdsComponent />
14+
<br />
15+
16+
## 1. The Problem: Viewport Dependency
17+
18+
In traditional responsive design, you use `@media` queries:
19+
20+
```css title="styles.css"
21+
/* Media Query: If the entire browser viewport is wider than 600px... */
22+
@media (min-width: 600px) {
23+
.card {
24+
display: flex; /* Display cards horizontally */
25+
}
26+
}
27+
```
28+
29+
This works fine for page-level layouts, but it breaks down for components:
30+
31+
1. If the viewport is wide, the Card is horizontal.
32+
2. If you move that Card component into a narrow sidebar (e.g., $200\text{px}$ wide), the Card will still try to be horizontal because the *viewport* is wide, causing layout chaos and overflow.
33+
34+
**Container Queries fix this by making components self-aware of their local space.**
35+
36+
## 2. Defining the Container (`container-type`)
37+
38+
To use a container query, you must first define which ancestor element will be the "queryable container." This is done using the `container-type` property on the parent.
39+
40+
| Value | Description | Use Case |
41+
| :--- | :--- | :--- |
42+
| **`size`** | Queries can be based on both the container's **width** and **height**. (Requires caution due to potential infinite loops). | Components where both dimensions matter. |
43+
| **`inline-size`** | Queries can only be based on the container's **width** (the most common and safest option, as it avoids infinite width/height loops). | Responsive cards, article components. |
44+
| `normal` (Default) | Not a container. | Standard elements. |
45+
46+
```css title="styles.css"
47+
/* The element we will query against */
48+
.sidebar, .main-content-area {
49+
container-type: inline-size;
50+
container-name: primary-context; /* Optional, but recommended for clarity */
51+
}
52+
```
53+
54+
<AdsComponent />
55+
<br />
56+
57+
## 3. Writing the Query (`@container`)
58+
59+
The `@container` syntax is very similar to `@media`, but it queries the containing element defined in step 1.
60+
61+
The query is written directly within the styles of the **child component** that needs to adapt.
62+
63+
```css title="styles.css"
64+
/* This is the component style, placed INSIDE the .sidebar or .main-content-area */
65+
.card {
66+
display: block; /* Default state: stacked (vertical) */
67+
}
68+
69+
/* Query: If my container is wider than 400px, change my layout */
70+
@container primary-context (min-width: 400px) {
71+
.card {
72+
display: flex; /* Adaptive state: horizontal */
73+
}
74+
.card-image {
75+
width: 30%;
76+
}
77+
}
78+
```
79+
80+
Now, that `.card` will only switch to `display: flex` when it is placed inside an ancestor with `container-type: inline-size` that is at least $400\text{px}$ wide, regardless of the overall viewport size.
81+
82+
## 4. The Benefits: True Component Isolation
83+
84+
1. **Portability:** Components become truly reusable. You can drop the same component into a $300\text{px}$ sidebar, a $1000\text{px}$ main column, or a $500\text{px}$ footer, and it will adjust its internal layout intelligently.
85+
2. **Maintainability:** Styling is logically grouped. All rules governing a component's appearance are found in one place, relative to the component itself, not to the global viewport.
86+
3. **Future-Proofing:** Simplifies nested layouts and complex grid systems, as components don't rely on global context.
87+
88+
<AdsComponent />
89+
<br />
90+
91+
## Interactive Container Query Demo
92+
93+
In this demo, we define two parent containers of different widths. Both parents have `container-type: inline-size;`. The child component (`.responsive-box`) only switches its layout (from vertical stacking to horizontal flex) when its **immediate parent** hits the $300\text{px}$ breakpoint.
94+
95+
<CodePenEmbed
96+
title="Interactive Container Query Demo"
97+
penId="pvyVYpq"
98+
/>

‎docs/css/layout/modern-layouts/flexbox.mdx‎

Lines changed: 173 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,173 @@
1-
<ComingSoon />
1+
---
2+
title: "Flexbox (Flexible Box Layout)"
3+
description: "Master the CSS Flexible Box Layout module (Flexbox) for efficient, one-dimensional layout, distributing space, and aligning items in a container."
4+
keywords: [CSS Flexbox, flexible box layout, flex container, flex items, justify-content, align-items, flex-direction, flex-grow, flex-shrink, modern layout]
5+
tags: [CSS Flexbox, flexible box layout, flex container, flex items, justify-content, align-items, flex-direction, flex-grow, flex-shrink, modern layout]
6+
sidebar_label: Flexbox
7+
---
8+
9+
The Flexible Box Layout Module, commonly referred to as **Flexbox**, is a one-dimensional layout system designed to distribute space among items in a container and align them, making it easy to build complex, responsive components like navigation bars, galleries, and form groups.
10+
11+
Unlike the traditional Normal Flow, Flexbox provides predictable behavior for adjusting content based on the screen size and available space.
12+
13+
<AdsComponent />
14+
<br />
15+
16+
## 1. Core Concepts: Container and Items
17+
18+
Flexbox works through a simple parent-child relationship:
19+
20+
1. **The Flex Container (Parent):** The element where you declare `display: flex;`. This parent element defines the Flex Formatting Context for its direct children.
21+
2. **The Flex Items (Children):** The direct children of the Flex Container. They become flexible and are controlled by the properties set on the parent.
22+
23+
:::tip Single-Dimensional
24+
Remember that Flexbox is **one-dimensional**. It manages layout along either a row *or* a column, but not both simultaneously. For two-dimensional control (rows and columns together), you should use CSS Grid.
25+
:::
26+
27+
## 2. The Two Axes
28+
29+
The behavior of Flexbox is defined by two perpendicular axes, whose orientation is determined by the `flex-direction` property.
30+
31+
### A. The Main Axis
32+
33+
* This is the primary axis along which **Flex Items** are laid out.
34+
* The property `justify-content` controls spacing and alignment along the Main Axis.
35+
36+
### B. The Cross Axis
37+
38+
* This axis is perpendicular to the Main Axis.
39+
* The property `align-items` controls spacing and alignment along the Cross Axis.
40+
41+
If `flex-direction` is set to `row` (default), the Main Axis runs horizontally (left-to-right), and the Cross Axis runs vertically (top-to-bottom).
42+
43+
<AdsComponent />
44+
<br />
45+
46+
## 3. Flex Container Properties (The Parent)
47+
48+
These properties control the overall layout and positioning of the Flex Items.
49+
50+
### 3.1. `display`
51+
52+
Turns the element into a Flex Container.
53+
54+
```css title="styles.css"
55+
.container {
56+
display: flex; /* Creates a block-level flex container */
57+
/* OR */
58+
display: inline-flex; /* Creates an inline-level flex container */
59+
}
60+
```
61+
62+
### 3.2. `flex-direction`
63+
64+
Establishes the Main Axis and its direction.
65+
66+
| Value | Direction |
67+
| :--- | :--- |
68+
| `row` (Default) | Horizontal, left-to-right (Main Axis). |
69+
| `row-reverse` | Horizontal, right-to-left. |
70+
| `column` | Vertical, top-to-bottom (Main Axis). |
71+
| `column-reverse` | Vertical, bottom-to-top. |
72+
73+
### 3.3. `justify-content` (Main Axis Alignment)
74+
75+
Defines how space is distributed between and around items along the Main Axis.
76+
77+
| Value | Description |
78+
| :--- | :--- |
79+
| `flex-start` (Default) | Items are packed toward the start line. |
80+
| `flex-end` | Items are packed toward the end line. |
81+
| `center` | Items are centered along the line. |
82+
| `space-between` | Items are evenly distributed; first item is at the start, last is at the end. |
83+
| `space-around` | Items have equal space around them (leading to half-space at the ends). |
84+
| `space-evenly` | Items have completely equal space between, before, and after them. |
85+
86+
### 3.4. `align-items` (Cross Axis Alignment)
87+
88+
Defines how items are aligned along the Cross Axis (perpendicular to the Main Axis).
89+
90+
| Value | Description |
91+
| :--- | :--- |
92+
| `stretch` (Default) | Items stretch to fill the container (respecting min/max width/height). |
93+
| `flex-start` | Items are aligned to the start of the Cross Axis. |
94+
| `flex-end` | Items are aligned to the end of the Cross Axis. |
95+
| `center` | Items are centered on the Cross Axis. |
96+
| `baseline` | Items are aligned based on their content's baseline. |
97+
98+
### 3.5. `flex-wrap`
99+
100+
By default, all items try to fit on a single line. If items must wrap onto multiple lines, use `flex-wrap`.
101+
102+
| Value | Description |
103+
| :--- | :--- |
104+
| `nowrap` (Default) | Items will shrink to fit one line. |
105+
| `wrap` | Items will wrap onto a new line if space is insufficient. |
106+
| `wrap-reverse` | Items wrap in reverse order. |
107+
108+
:::caution Flex-Shorthand
109+
The properties `flex-direction` and `flex-wrap` can be combined into the shorthand property: `flex-flow`.
110+
Example: `.container { flex-flow: row wrap; }`
111+
:::
112+
113+
<AdsComponent />
114+
<br />
115+
116+
## 4. Flex Item Properties (The Child)
117+
118+
These properties control individual items within the container.
119+
120+
### 4.1. `order`
121+
122+
By default, items are displayed in source order. `order` allows you to change the visual sequence. Lower numbers appear first.
123+
124+
```css title="styles.css"
125+
.item-a { order: 2; }
126+
.item-b { order: 1; } /* Item B will appear before Item A */
127+
```
128+
129+
### 4.2. `flex-grow`
130+
131+
A number that determines how much the item will grow to take up extra available space in the container. Default is `0`.
132+
133+
### 4.3. `flex-shrink`
134+
135+
A number that determines how much the item will shrink relative to other items if there is not enough space. Default is `1`.
136+
137+
### 4.4. `flex-basis`
138+
139+
The initial size of the item before any growing or shrinking occurs. It can be a length (`100px`) or a percentage (`25%`). Default is `auto`.
140+
141+
### 4.5. `flex` (Shorthand)
142+
143+
The shorthand for `flex-grow`, `flex-shrink`, and `flex-basis`.
144+
145+
```css title="styles.css"
146+
.item {
147+
flex: 1 1 auto; /* grow: 1, shrink: 1, basis: auto (default) */
148+
/* OR: flex: 1; (equivalent to flex: 1 1 0) */
149+
}
150+
```
151+
152+
<AdsComponent />
153+
<br />
154+
155+
### 4.6. `align-self`
156+
157+
Overrides the `align-items` value set on the parent container for a single flex item.
158+
159+
```css title="styles.css"
160+
/* Parent has align-items: flex-start; */
161+
.item-special {
162+
align-self: center; /* This item will be centered vertically */
163+
}
164+
```
165+
166+
## Interactive Flexbox Demo
167+
168+
Use the CSS tab to experiment with the parent properties (`flex-direction`, `justify-content`, `align-items`) and the item properties (`flex-grow`, `flex-basis`).
169+
170+
<CodePenEmbed
171+
title="Interactive Flexbox Demo"
172+
penId="yyOjvgo"
173+
/>

0 commit comments

Comments
 (0)