CSS Flexbox Layout
Created by admin@example.com on March 28, 2025
1 | /* CSS Flexbox Layout Example */
|
2 |
|
3 | .container {
|
4 | display: flex;
|
5 | flex-direction: row;
|
6 | flex-wrap: wrap;
|
7 | justify-content: space-between;
|
8 | align-items: center;
|
9 | gap: 20px;
|
10 | padding: 20px;
|
11 | background-color: #f5f5f5;
|
12 | border-radius: 8px;
|
13 | }
|
14 |
|
15 | .item {
|
16 | flex: 1 1 300px;
|
17 | padding: 20px;
|
18 | background-color: white;
|
19 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
20 | border-radius: 4px;
|
21 | }
|
22 |
|
23 | .item-featured {
|
24 | flex: 2 1 400px;
|
25 | background-color: #e6f7ff;
|
26 | border-left: 4px solid #1890ff;
|
27 | }
|
28 |
|
29 | /* Responsive adjustments */
|
30 | @media (max-width: 768px) {
|
31 | .container {
|
32 | flex-direction: column;
|
33 | }
|
34 |
|
35 | .item, .item-featured {
|
36 | flex: 1 1 100%;
|
37 | }
|
38 | }
|