Finally, Flexbox
A Long Time Coming
-
CSS Flexbox Layout Guide – CSS Tricks
This page is a classic! It probably bought Chris Coyier a house. -
Basic Concepts of Flexbox – MDN
Can’t go wrong. -
Flexbox Froggy
A little game.
float and position) either made difficult, brittle, or even impossible. It is a
And let us tell you—being a web designer was a
Main and Cross Axes
Flexbox is a
These are called the
The one running in the direction of your flex items is your
.some-container {
display: flex;
flex-direction: row; /* Default! */
}
.some-container {
display: flex;
flex-direction: column; /* Rotated! */
}
Start/End, Justify/Align
Flex also lets us position elements along/within the axes, in both directions—in relation to the start or the end of the direction.
For the justify ; for the align :
.some-container {
display: flex;
flex-direction: row; /* Default! */
}
For rows (the default): justify moves items inline (left/right); align moves block (top/bottom).
.some-container {
display: flex;
flex-direction: column; /* Rotated! */
}
For columns (rotated): justify moves items block (top/bottom); align moves inline (left/right).
Shorthand
Like a lot of CSS,
But again, we would avoid them—the system can be hard enough to understand. This will be true when we get to grid as well—often being a little bit more verbose in your code will make things easier to understand, especially starting out.
Container (Parent) Properties
Unlike most (…all?) of the CSS we’ve been introduced to, display: flex; is really telling you what its kids are going to be doing.
There is also display: inline-flex; which behaves the same, but the parent behaves as an inline element while its children are flexing. You don’t see it used very much.
flex-direction
After specifying an element as flex-direction property. By default (you don’t have to write it), this behaves as flex-direction: row;—so you’ll generally only be adding it when you want something going vertical, with flex-direction: column; :
flex-direction – MDN
Always row by default.
display: block; by default. Also note that we gave them all a min-block-size, to show start/end!
You can also combine these with a -reverse suffix, which visually reorders the items along the start and end:
Keep in mind that all flex reordering is only
flex-wrap
Since flexbox is flex-wrap: wrap; property/value (set to nowrap by default):
flex-wrap – MDN
The only
There is also a -reverse suffix when wrapping, which will sequence items from end to start:
justify-content
So most of what we’ve seen here is… somewhat possible using float and position—though not at all easily and only when you know the size/counts of your content.
justify-content – MDN
How should we space items out?
But the justify-content property is where flexbox starts to allow novel layouts, by dividing up the extra/available free space between elements—akin to justify-content does this on our
start/end values have some nuance with different writing directions, but this doesn’t come up often.
When our flex-direction: column; :
block-size to align-items
And then perpendicular to justify along the align-items property to position elements along the
align-items – MDN
For the cross/perpendicular axis.
And for the vertical:
align-content
When we have a flex element with flex-wrap set, we can also position the align-content property—akin to justify-content with each line:
align-content – MDN
When there is extra room.
block-size and the flex-wrap.
align-content can also be used with a vertical/flex-direction: column; axis, not shown here. This doesn’t often come up, as you have to specify/know a height to force a column wrap.
gap / row-gap / column-gap
While you could use :not(:first-child) selectors for margin in the examples, so far.)
gap– MDNrow-gap– MDNcolumn-gap– MDN
These are common with CSS grid!
Flex added support for intuitive gap properties, which fix this problem—by applying spacing only
gap are really Item (Child) Properties
Flexbox is display: flex; on an element, there are also some individual override properties that can be given to its children,
order
Kind of like the -reverse suffix—you can individually apply the order property to a order: 0; ) will be displayed in their HTML/source order:
order – MDN
Visual/display only!
Other order-based selectors (like :first-child) won’t be fooled by this reordering—as you can see, we used them here. They still use the HTML/DOM order. And again, this change is only
flex-grow / flex-shrink
These properties tell the flex items to… grow or shrink, if necessary—defining the amount of available/remaining space in the container an element should take up—filling the whole container, like bento boxes.
flex-grow– MDNflex-shrink– MDN
Who takes up the extra space?
It takes a flex-grow: 1; it will take up all the extra space; another element with flex-grow: 2; would then take twice as much of that space as the first one (the available space with 3 total units):
And flex-shrink works the same way—defining what proportion an element should shrink when forced to by the flex layout. The most use you’ll see of this is flex-shrink: 0; , which tells all the
flex-basis
The flex-basis property is a little like inline-size and block-size—depending on your
flex-basis – MDN
How much of the space.
This defaults to auto, which falls back to any specified inline-size or block-size—and if those aren’t present, will just use the size of the content. You specify this flex-basis with length units like % and px :
inline-size / block-size.
align-self
Finally, we have an individual override for an align-items property set on the parent—the align-self property—which adjusts (with the same keywords/values) the alignment of the
align-self – MDN
Overrides this child! Rebels.
This is a lot of stuff! Flex can sometimes be tough to wrap one’s head around, but it is float and inline-size and margin shenanigans.
Much of what you look at on the web is laid out in flexbox (and its followup which we keep mentioning, CSS Grid).