0% found this document useful (0 votes)
35 views20 pages

FlexBox Wizard

coding

Uploaded by

anshulsharmacoc
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
35 views20 pages

FlexBox Wizard

coding

Uploaded by

anshulsharmacoc
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

Flexbox Wizard

For Web Developers


A quick guide by @webdevwizard0
What is Flexbox?
Flexbox is a layout model in CSS (Cascading Style Sheets) that
helps you design and organize elements on a web page. Think of
it like a set of rules you can apply to a container and its children
to control how they're arranged and sized within that container.
Flexbox is a widely used CSS layout method for its simplicity and
versatility in arranging elements in rows or columns.
Flexbox can seem confusing at first, and I've had my own
struggles with it. But sometimes, CSS can be confusing, and that's
just how it goes.

That's enough introduction, let’s get started:


We have a section, with 3 boxes (divs) within it:
HTML
RESULTS (with a bit of styling)

<div class=”box”>

<Section>

<Section> is the parent element, and the divs are the children.
Display: Flex

Now, we’ll add display: flex; to the <section> element, it will


simply change how the boxes inside it are arranged.
Instead of stacking on top of each other, the boxes will line up
side by side horizontally. It's like putting them in a row.

RESULTS
The space between the elements is a margin that I added in CSS.

Here’s the results without margin:

So, when you use display: flex; on an element, you're essentially


giving it permission to use flexbox layout properties. It's like
opening the door for that element to be positioned and moved
around using flexbox rules. Once you've opened that door with
display: flex, you can then use other flexbox properties.
Justify-Content
move the flex items horizontally (main axis*)
Justify-content: center

RESULTS

As we can see, when we added justify-content: center; to the


<section> element, it horizontally centered the boxes inside it.
However, justify-content has other properties too, such as ‘flex-
start’, ‘flex-end’, ‘space-between’, ‘space-around’.
Justify-content: flex-start

Justify-content: flex-end

Justify-content: space-between

(Items will have space between them)

Justify-content: space-around

(Items will have space before, between, and after them)


Align-Items
move the flex items vertically (cross axis*)

We assigned a height of 500px to our section, so we can see the


items moving.
align-items:center
align-items: flex-start

align-items: flex-end
Center a <div>
Now, let’s use what we’ve learned and try to center a <div>.
(It’s better if you go give it a try by yourself first)

HTML

Styling our <div>


Let’s use flexbox now
(we gave height to <body> so that our <div> element have space to move within)

RESULTS
Flex-Direction
Determines how the flex items are arranged
(in a row or a column)

HTML

CSS

RESULTS
With flex-direction: column; the boxes are laid out in a column,
stacking vertically on top of each other.
This is because flex-direction: column; sets the main axis of the
flex container to be vertical.
Other properties:
Flex-direction: column-reverse;
Flex-direction: row

Flex-direction: row-reverse
One more center

RESULTS
Main & Cross Axis
If the main axis is horizontal (e.g., flex-direction: row), then justify-
content will affect horizontal positioning, and align-items will affect
vertical positioning.
Conversely, if the main axis is vertical (e.g., flex-direction: column;),
then justify-content will affect vertical positioning, and align-items will
affect horizontal positioning.
justify-content affects the alignment of flex items along the main axis.
Depending on its value, it can push items to the start, end, or center of
the main axis, or distribute them evenly along the axis.
align-items affects the alignment of flex items along the cross axis. It
determines how items are positioned relative to each other on the
perpendicular axis to the main axis.
Conclusion
Flexbox is a super helpful tool for building websites today.
It makes creating fancy and responsive layouts with CSS
much easier.

While justify-content, align-items, and flex-direction are


the most utilized in FlexBox, but there's a whole bunch of
other cool stuff you can learn too!

Here are some other properties that you should learn


about Flexbox:
• Flex:
o Flex-basis
o Flex-shrink
o Flex-grow
• Align-self
• Flex-wrap
• Align-content
• Gap
One Last Tip
Reading guides and watching videos are great for starting,
but the best way to really grasp Flexbox is to practice by
building stuff yourself. Here are the best practices and
projects that helped me to learn Flexbox:
- Navbar
- Landing Page
- Photo Gallery
- Sidebar
- Flexbox Games:
o Flexbox Defence
o Flexbox Froggy
o Flexbox Zombies
o Coding Fantasy
Thanks for Reading!
You made it to the end! Thanks for taking the time to learn
Flexbox with this e-book. I hope it's been helpful and made
understanding Flexbox a breeze.

Ready to Keep Building?

This e-book is just the beginning of your web development


journey! If you're eager to keep learning and create even more
amazing things, I have two free resources for you:

- Full-Stack Roadmap: This guide will take you


on a step-by-step adventure through the
world of full-stack development

- 50+ HTML, CSS, and JS Projects: Want to


put your newfound Flexbox skills to the test?
Dive into this collection of 50+ projects.

Both of these products are completely free, so you can keep


learning and growing as a developer without breaking the bank.

Happy coding!

P.S. Feel free to share this e-book with anyone who might be
interested in learning Flexbox. The more the merrier!

You might also like