Skip to content

Commit db7335c

Browse files
AKSHITHA-CHILUKAAKSHITHA-CHILUKA
authored
Create css-flexbox.md
1 parent ad534ec commit db7335c

File tree

1 file changed

+184
-0
lines changed

1 file changed

+184
-0
lines changed

‎docs/CSS/css-flexbox.md

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
# CSS Flexbox
2+
3+
## Introduction
4+
Flexbox, or the Flexible Box Layout, is a CSS layout module designed to make it easier to design flexible and responsive layout structures without using floats or positioning.
5+
6+
## Basic Concepts
7+
8+
### Flex Container
9+
A flex container is an element with `display: flex`. The children of this container become flex items.
10+
11+
```css
12+
.container {
13+
display: flex;
14+
}
15+
```
16+
17+
-Flex Items:
18+
The direct children of a flex container automatically become flex items.
19+
20+
```html
21+
<div class="container">
22+
<div class="item">Item 1</div>
23+
<div class="item">Item 2</div>
24+
<div class="item">Item 3</div>
25+
</div>
26+
```
27+
28+
# Flexbox Properties:
29+
## Container Properties:
30+
### flex-direction:
31+
32+
-Defines the direction of the flex items.
33+
-Possible values: row, row-reverse, column, column-reverse.
34+
35+
```css
36+
.container {
37+
flex-direction: row; /* default */
38+
}
39+
```
40+
41+
### flex-wrap:
42+
43+
-Specifies whether flex items should wrap or not.
44+
-Possible values: nowrap, wrap, wrap-reverse.
45+
46+
```css
47+
.container {
48+
flex-wrap: wrap;
49+
}
50+
```
51+
52+
### justify-content:
53+
-Defines the alignment along the main axis.
54+
-Possible values: flex-start, flex-end, center, space-between, space-around, space-evenly.
55+
56+
```css
57+
.container {
58+
justify-content: center;
59+
}
60+
```
61+
### align-items:
62+
-Defines the default behavior for how flex items are laid out along the cross axis.
63+
-Possible values: flex-start, flex-end, center, baseline, stretch
64+
65+
```css
66+
.container {
67+
align-items: stretch; /* default */
68+
}
69+
```
70+
71+
### align-content:
72+
73+
-Aligns a flex container’s lines within the flex container when there is extra space in the cross-axis.
74+
-Possible values: flex-start, flex-end, center, space-between, space-around, stretch.
75+
76+
```css
77+
.container {
78+
align-content: stretch; /* default */
79+
}
80+
```
81+
82+
# Item Properties
83+
### order
84+
85+
-Controls the order in which flex items appear in the flex container.
86+
```css
87+
.item {
88+
order: 1; /* default is 0 */
89+
}
90+
```
91+
92+
### flex-grow
93+
94+
-Defines the ability for a flex item to grow if necessary.
95+
96+
```css
97+
.item {
98+
flex-grow: 1; /* default is 0 */
99+
}
100+
```
101+
102+
### lex-shrink
103+
104+
-Defines the ability for a flex item to shrink if necessary.
105+
```css
106+
.item {
107+
flex-shrink: 1; /* default is 1 */
108+
}
109+
```
110+
111+
## Basic Flexbox Layout
112+
```html
113+
<!DOCTYPE html>
114+
<html lang="en">
115+
<head>
116+
<meta charset="UTF-8">
117+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
118+
<style>
119+
.container {
120+
display: flex;
121+
justify-content: center;
122+
align-items: center;
123+
height: 100vh;
124+
background-color: #f4f4f4;
125+
}
126+
.item {
127+
background-color: #61dafb;
128+
padding: 20px;
129+
margin: 10px;
130+
font-size: 20px;
131+
color: white;
132+
border-radius: 5px;
133+
}
134+
</style>
135+
</head>
136+
<body>
137+
<div class="container">
138+
<div class="item">Item 1</div>
139+
<div class="item">Item 2</div>
140+
<div class="item">Item 3</div>
141+
</div>
142+
</body>
143+
</html>
144+
```
145+
146+
## Responsive Flexbox Layout
147+
```html
148+
<!DOCTYPE html>
149+
<html lang="en">
150+
<head>
151+
<meta charset="UTF-8">
152+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
153+
<style>
154+
.container {
155+
display: flex;
156+
flex-wrap: wrap;
157+
gap: 10px;
158+
background-color: #f4f4f4;
159+
padding: 20px;
160+
}
161+
.item {
162+
background-color: #61dafb;
163+
padding: 20px;
164+
font-size: 20px;
165+
color: white;
166+
border-radius: 5px;
167+
flex: 1 1 200px; /* Grow and shrink with a basis of 200px */
168+
}
169+
</style>
170+
</head>
171+
<body>
172+
<div class="container">
173+
<div class="item">Item 1</div>
174+
<div class="item">Item 2</div>
175+
<div class="item">Item 3</div>
176+
<div class="item">Item 4</div>
177+
<div class="item">Item 5</div>
178+
</div>
179+
</body>
180+
</html>
181+
```
182+
183+
## Conclusion:
184+
Flexbox is a powerful layout tool that simplifies the process of creating complex layouts and responsive designs. With its various properties, you can control the arrangement, alignment, and spacing of elements efficiently.

0 commit comments

Comments
 (0)