Flexbox is a group of CSS properties for layout that can be used for putting things in rows and columns, aligning them, sizing them, grouping them or creating space between them.
Flexbox works in one dimension and it can be used to lay things out either vertically or horizontally. However, almost all web pages have a certain directionality to them: they scroll vertically. That means that the width of elements is typically constrained and their height is typically not.
For that reason, we’re mostly dealing with laying things out in rows, because columns just kind of take care of themselves by expanding in height and taking up more vertical space, of which there is plenty.
That said, please keep in mind that all of these examples can be flipped to work in a vertical direction as well, and at the very end of this page we’ll show you what that looks like.
#fluid-row { display: flex; flex-flow: row nowrap; gap: 8px; } #fluid-row > * { flex: 1 1 auto; }
This setup is responsive by default: the rows will fit as many items as they can before wrapping to the next line.
#fixed-width-items { display: flex; flex-flow: row wrap; gap: 8px; } #fixed-width-items > * { flex: 0 0 100px; }
Container size:
Here we change only one character: a 0
in flex
a 1
. That changes the items’ flex-grow
to
1
, so they will now fill the row. Note that they are no
longer just 100px but if there are 3 of them on a 360px row, they will
expand to 120px to fill the extra space (note that the gap between items
makes this a little different).
The items on the last row will also grow to fill the whole row— even if there’s only one item it will grow to 100%. If that is not your desired effect, you’re probably better off using CSS Grid which does a better job of keeping things in their lines.
#flexible-width-items { display: flex; flex-flow: row wrap; gap: 8px; } #flexible-width-items > * { flex: 1 0 100px; }
Container size:
((not sure what this is but perhaps you can change width, flex-grow and flex-shrink with number inputs)) ((use text so the items are different widths))
These Flexbox properties are poorly named and it’s hard to keep them
straight. Here we present them in their order of importance. That is, when
you’re sitting there trying to remember which property you need, grab
justify-content first because that’s most likely what you’re looking for
because it’s the main axis. Then go for align-items
because
that’s often also quite useful. The use of align-content
is
much more limited so you might simplify things for yourself by just not
trying to remember that one at all.
justify-content
justify-content: start;
justify-content: center;
justify-content: end;
justify-content: space-evenly;
justify-content: space-around;
justify-content: space-between;
align-items
align-items: start
align-items: end
align-items: center
align-items: stretch
align-items: baseline
is perhaps the only one that might
require some explanation. This setting will align the items based on the
text inside of them and you can see the letters below on a nice line.
Pretty neat.
align-content
align-content: start;
align-content: center;
align-content: end;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
This property is basically width
. The advantage of using it
vs width (or height) is that you can use the shorthand property
flex
. ((might be more useful for animations/transitions but
I’m not sure))
Just when you thought maybe you were getting it, we’re going to rotate everything 90 degrees.