Let's talk through the basics of one of the most versatile modules in CSS -- the flexbox!
The flexbox has two elements: the parent element (the container that's 'flexing') and the child element (the flex items). It's amazingly versatile because it allows us to format, layout and organize even when the size of the space is unknown-- or it's dynamic!
Parent properties:
1. display This is the building block, that is going to define the flex container.
.container {
display: flex;
}
2. flex-direction This is going to dictate which axis your flexbox parent expands on, and which direction on that axis.
row: left to right
row-reverse: right to left
column: north to south
column-reverse: south to north
.container {
flex-direction: row (OR) row-reverse (OR) column (OR) column-reverse;
}
3. flex-wrap Flexbox will always try to fit items into one line-- this property can allow it to wrap to a new line.
nowrap: all on one line
wrap: wrap onto multiple lines (top to bottom)
wrap-reverse: multiple lines (bottom to top)
.container {
flex-wrap: nowrap (OR) wrap (OR) wrap-reverse;
}
4. justify-content This property defines the alignment on the axis declared originally for the flex.
flex-start: items are packed toward the start of the flex-direction
flex-end: packed toward end of flex direction
start: packed toward start of writing-mode direction
end: packed toward end of writing-mode direction
left: left packed toward left edge of container
right: left packed toward right edge of container
center: centered
space-between: items are evenly spaced on line
space-around: items are evenly spaced, space around them is also even
space-evenly: spacing between items and edges is even
.container {
justify-content: flex-start (OR) flex-end (OR) center (OR) space-between (OR) space-around (OR) space-evenly (OR) start (OR) end (OR) left (OR) right (OR) you get the idea;
}
5. align-items This defines how the items are laid out on the crossing axis of the current line.
stretch: (default) stretches to fill container
flex-start: start of the cross axis
flex-end: end of the cross axis
center: items are centered on cross axis
baseline: items are aligned so their baselines are aligned
For this one, imagine your flex goes L-->R. Flex-start would mean all items align at the top (North). Flex-end would align them at the bottom (South). Center would center them along the center of North-South, centered by the item's center. Stretch would make them fill equal North-South space from the center. Baseline will center them North-South by baseline.
.container {
align-items: (value here)
}
6. align-content This aligns the lines of a flex container within the extra space on the cross axis. This property only effects multi-lines flex containers.
normal: (default)
flex-start: items packed to start of container
flex-end: items packed to end of container
center: items centered in container
space-between: items evenly distributed from start to end of container
space-around: items evenly distributed with equal space around each line
space-evenly: items are evenly distributed with equal space around them
stretch: lines stretch to take up space
.container {
align-content: (value here)
}
7. gaps The gap property handles the space between flex items. It only applies between items, and doesn't affect edges.
you can declare:
gap: 20px (default)
gap: 20px 20px (row-gap then column-gap)
row-gap: 20px
column-gap: 20px
.container {
display: flex;
...
gap: 10px;
gap: 10px 20px;
row-gap: 10px;
column-gap: 20px;
}
Child properties:
1. order This can control the order items appear in the flex container. If items have the same order, they default to their source order.
.item {
order: 5;
}
2. flex-grow This defines the flex item's ability to grow if necessary. The value is a proportion.
For example, if all items had a value of 1, the space would be distributed equally between the children. If one item had a 2, it would take up twice the allotted space of all other items.
.item {
flex-grow: 4;
}
3. flex-shrink This is the opposite of grow, and allows items to shrink if necessary
.item {
flex-shrink: 3;
}
3. align-self This allows the default alignment (the one in align-items in the parent) to be overridden in a specific item
.item {
align-self: auto (OR) flex-start (OR) flex-end (OR) center (OR) baseline (OR) stretch;
}
It can take awhile to get a hang of the flexbox, but it's worth it!
Check out this amazing visual guide to CSS flexbox here!
Top comments (8)
Don't mind the hate about posting for yourself. It's a great way to learn when you have to explain it to yourself! Also, you're a minority who actually wants to learn how CSS works instead of relying on wrappers and frameworks.
Some pointers I have would be to include more default values, like flex-direction. But maybe you're already doing that :)
Another tip is to explain to yourself when to use justify-content or align-items depending on flex-direction. It's basically the CSS equivalent to inserting a USB the first time 😅
I don't know which sources you use but I keep going back to this one even tho I would like to think I know more about CSS than the average developer.
Keep up the good work!
Aw thank you so much for the encouragement! And that's a great tip thanks! Still definitely playing with when/where to use and the hierarchy. And yes! That's the best resource, thank you!
Awesome!
Yeah, in my experience (so far) nesting is great. I think it's easier to control and work with nested flexboxes than grids. As a beginner, I like to work with/modify flexboxes to figure out wonky issues since they only flex one direction, vs trying to work with grids on both axes.
I was explaining it for beginners like myself, and it's beneficial for me to type it out in my own words. As a beginner to coding, obviously I don't have anything new or wonderful to say.
Dev is a blog-like community with the posts, so it's not like Wikipedia in that way at all. If what I'm saying is so boring to you, don't save, like or comment on my posts. :-)
If you love just going around and thumbs-downing people, head on over to Stack Overflow and get your hate-game on!
As I am pretty new to coding and am working through being a beginner (and trying to explain to other beginners) I don't think this is the level of explanation you're looking for. Glad you have better resources than my blog!
I forgot about row-gap and column-gap! Thanks for post! I’m going to go fix a flex gap issue now 🙂
Yay glad it jogged your memory! :)
I always use this cheat sheet for reference but it doesn’t have gap in it.
flexbox.malven.co/
Some comments have been hidden by the post's author - find out more