Pratham Profile picture
7 Apr, 16 tweets, 7 min read
Everything you need to know about CSS Flex layout

A Thread🧵
Start appyling display: flex; property to parent element
This will take the all the elements in horizontal direction

{ 2 / 16 }
You can also change the direction of elements. For doing so, you need to mention the "flex-direction" property

The flex-direction property specifies the direction of the items within the flex container

{ 3 / 16 }
After applying row, row-reverse, column and column-reverse in flex-direction

They all are pretty intuitive.

{ 4 / 16 }
If we have a large number of element in flex container, it can destroy the widht of elements

As you can see our elements have shrunk a bit. This is becasue we haven't applied the flex-wrap property.

{ 5 / 16 }
📌 flex-wrap

It defines whether the flex items are forced in a single line or can be flowed into multiple lines depending on screen size. It persist the width of elements

.parent {
flex-wrap: wrap;

{ 6 / 16 }
Moving forward, I think this is right time to understand what main and cross axes are👇

We can align elements wihtin Flexbox in accordance with these two axis.

{ 7 / 16 }
Time to align flexible items within flex container

🔹 Justify-content: For horizontal alignment
🔹 Align-content: For vertical alignment

{ 8 / 16 }
The justify-content property aligns the items within flex container.

- flex-start
- flex-end
- center
- space- between (Items will equal space between them)
- space-around (equal space b/w elements with half left side and half right side)
- space-evenly

{ 9 / 16 }
align-content for vertical alignment. For example

{ 10 / 16 }
You can also position a particular item inside flex container.

For this we have, align-self property

For example:

{ 11 / 16 }
You can pass following values in align-self

- auto
- stretch
- center
- flex-start
- flex-end
- baseline
- intial
- inherit

Play with code here:…

{ 12 / 16 }
Alright! Moving even further next we have is "order"

If you want to change the ordering of the items within flex container. You can use order property that specifies the order of an item relative to the rest of the items inside the same flex container.

{ 13 / 16 }
📌 flex-grow

The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container.

{ 14 / 16 }
Similarly we have "flex-shrink" property

The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container.

{ 15 / 16 }
I think that's pretty much it for this thread. Did I miss some points? Add below.

Thanks for reading this ❤️

{ 16 / 16 }

• • •

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with Pratham

Pratham Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Prathkum

9 Apr
These 9 websites will help you improve your JavaScript knowledge

1️⃣ JavaScript visualizer

- A great visualizer for JavaScript code

2️⃣ JavaScript Tutorial

- This JavaScript Tutorial helps you learn JavaScript programming language from scratch quickly and effectively.

🔗 Image
Read 11 tweets
8 Apr
These 30 free CSS generators can help you immensely and save you a lot of time

Mega Thread 🧵
1️⃣ Animation Generator

- Dead simple visual tools to help you generate CSS for your projects.

2️⃣ Palette Ninja

- Palette ninja is an online color scheme generator that allows you to create harmonious color schemes in seconds.

🔗 Image
Read 31 tweets
8 Apr
I compiled 22 cheat sheets in a single PDF. If you are interested, you can download it for absolutely free

🔗… Image
Table of content

1. Grid cheat sheet
2. Two axes of Flexbox
3. Alignment in layouts
4. Alignment in layouts (older version)
5. Grid overview
6. Flex cheat sheet
7. Display
8. Positioning in CSS
9. CSS selectors
10. animation-timing-function
11. CSS Box-model
12. Z-index
13. Semantic elements
14. Border-style
15. CSS pseudo classes
16. DOM addEventListener method
17. JavaScript Array methods
18. Arrow function
19. DOM
20. Functions
21. Tailwind Flex classes
22. Git workflow
Read 4 tweets
8 Apr
5 HTML features probably you haven't heard yet

Thread 🧵👇🏻
1️⃣ enterkeyhint attribute

The enterkeyhint is a global attribute defines the action for "enter" key on virtual keyboard

It accpets the following values 👇🏻 Image
2️⃣ sizes attribute

You may have heard about "size" attribute but did you know about "sizes" attribute?

The sizes attribute specifies the sizes of icons for visual media.

Check the compatibility here Image
Read 8 tweets
7 Apr
5 GitHub repositories that can help you writing better CSS code
📌 Awesome CSS Learning

- A tiny list limited to the best CSS Learning Resources

📌 Magic of CSS

- A CSS course to turn you into a magician

Read 6 tweets
6 Apr
Are you planning to learn React? If yes, these 35 tweets can make the process easier for you👇🏻

Long Thread🧵
If you just started or planning to getting started with React, this thread might help you.

In this thread I'll try to give you a quick overview to the world of React.

So if you find that sound interesting, give this thread a read😉

{ 2 / 35 }
Before you go further into the React, make sure to check these things

✅ Basic knowledge of HTML and CSS
✅ JavaScript fundamentals and ES6 features

I would like to suggest you build a decent hold on JavaScript concepts because that is the backbone of React

{ 3 / 35 }
Read 36 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!