https://github.com/faiqa-batool/css-flexbox

This repository includes the practice code I implemented while learning CSS Flexbox
https://github.com/faiqa-batool/css-flexbox

Last synced: 7 days ago
JSON representation

This repository includes the practice code I implemented while learning CSS Flexbox

• Host: GitHub
• URL: https://github.com/faiqa-batool/css-flexbox
• Owner: Faiqa-batool
• Created: 2024-07-01T19:30:12.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-07-05T20:09:11.000Z (4 months ago)
• Last Synced: 2024-07-06T01:25:38.001Z (4 months ago)
• Language: CSS
• Size: 33.2 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# CSS-Flexbox

This repository includes the practice code I implemented while learning CSS Flexbox

Flexbox is applied to position the elements easily 

We apply display: flex; to the parent div, so that the flexbox sets the position of the child divs 

### Before applying flexbox:

![image](https://github.com/Faiqa-batool/CSS-Flexbox/assets/115587465/6c54749e-23c3-4f34-9c11-bd36dee25d1d)

### After Applying Flexbox:

display: flex;

![image](https://github.com/Faiqa-batool/CSS-Flexbox/assets/115587465/8029c326-7a50-473d-ab19-ad5767f0a4d5)

### Justify-content : center; 

/flex-start /flex-end /space-betwen /space-evenly /space-around 

//align item horizontally

![image](https://github.com/Faiqa-batool/CSS-Flexbox/assets/115587465/15c1a2e0-f2ac-465a-a39e-7cbbc1f18257)

### align-items: center; 

// align items vertically

![image](https://github.com/Faiqa-batool/CSS-Flexbox/assets/115587465/6fc6a247-295f-4287-b678-fce3fb6314e2)

But it depends on flex-direction, that is row by default.

### flex-direction: column;

![image](https://github.com/Faiqa-batool/CSS-Flexbox/assets/115587465/aaa1cf8f-e975-438f-a60b-36414bda530c)

### flex-direction: column-reverse;

![image](https://github.com/Faiqa-batool/CSS-Flexbox/assets/115587465/bef11961-3c1d-466c-a939-1ddbd203245e)

### flex-direction: row-reverse;

![image](https://github.com/Faiqa-batool/CSS-Flexbox/assets/115587465/8b367864-fedc-4abd-a0c6-405f1194ef90)

### Flex-axes concept:

![image](https://github.com/Faiqa-batool/CSS-Flexbox/assets/115587465/73bc6924-9ee3-433a-9e9e-9c55c9b3ccb9)

Justify-content works along main-axis

### flex-wrap: wrap;

### align-content: center;

![image](https://github.com/Faiqa-batool/CSS-Flexbox/assets/115587465/9d067448-0b59-45dd-9735-72a15b50ded4)

There is no justify-items in flexbox

### flex-flow property:

flex-flow:  

the above was container properties. Now we will discuss item properties.

### Order property:

Change item’s order by using css, the higher the order, the last the item  //bd me show hoga 

Order 1 will come first, after all the non-order items

Default order is 0, that’s why all the other items will come first.

### flex-grow:

flex-grow:1;  // all the items take equal space in the container, full width. 

### flex-shrink:2;

Ability of a flexbox to shrink 

2 means--> it will shrink with the double speed

### align-self:

align-self --> only that particular item of flexbox will align separately

#### align-self: flex-end;

#### align-self: flex-start;

![image](https://github.com/Faiqa-batool/CSS-Flexbox/assets/115587465/80ab4c3f-e180-4907-9a8f-e573387fd29b)