Flexbox is everywhere right now. Well, talk of flexbox is everywhere, not so much its implementation just yet. We have been tinkering with it quite a bit these days and thought it might be handy to share these explorations. Each Friday we will post a small flexbox demo at our CodePen house.
We would like to officially start off this flexible adventure with a look at the problem flexbox is solving, review a brief introduction, list some essential flexbox resources, and then finally wrap it all up by recreating the Flexbox Fridays logo with CSS and flexbox.
The Problem Being Addressed
Tackling full site layouts with floats and wrangling text to be vertically aligned feels like such trial and error. It’s a lot of tinkering and guess work. It’s a bit messy, inefficient, and frustrating. These properties just simply weren’t meant to be used in this manner, yet we manipulate them to construct entire sites.
Flexbox, in contrast, was created specifically for layout. Its sole purpose is it distribute space and align content. There is no guesswork here, as it’s completely based on box and space calculations. Centering an element for example, something that once was the cause of great misery, can now be done effortlessly.
The content of a flex container can be laid out in any flow direction, have their display order manipulated, be laid out along one axis or wrapped into multiple lines, have their size responsive to the space available, and so much more that we intend to explore here with you each Friday!
Brief Intro
With flexbox we can map out an entire document through block layouts, or use it inline to better position text. Flexbox is activated by declaring display: flex; or display: inline-flex; on a container that then becomes a flex container. The items within this container are now flex items.
A flex layout is based on flex directions.
The main, or horizontal, axis of a flex container is the primary axis that the encompassed items will be laid out along. Including the justify-content property would allow for the specification of where exactly these items should be mapped on the main axis.
Once we set our containers and items to be flexible we can then specify wrapping, space dimensions, ordering, size, and alignment. It’s a beautiful thing.
An important note here is that using flexbox still requires the use of vendor prefixes, so you will want to be sure to use a postprocessor tool such as Autoprefixer to save yourself some frustration.
Resources
Luckily there are more and more flexbox resources out there these days and some especially useful ones created recently. Let’s review some of these.
CSS-Tricks put together a flexbox guide which is the perfect combination of visuals, brief explanations, and practical examples. This particular guide is especially handy for beginners.
Solved by Flexbox is a superior reference by Phil Walton that explores building layouts with flexbox that would be considered especially tricky, or messy, to more traditional CSS alone (read “floats”) by providing quick flexbox snippets. He also mentions browser support here and addresses potential “gotchas!” head on.
Phil also spearheaded a community curated list of flexbox issues and cross browser work-arounds that you might want to keep an eye on.
Flexbox Adventures by Chris Wright starts off with a little demo and and then proceeds to break down that pesky but beautiful math and space caluculations flexbox uses. His work provides a great summary to flexed item distribution and ordering.
Chris also wrote a follow up to Flexbox Adventures, Using Flexbox Today, where he specifically lists and discusses how many current layouts can be created more efficiently with flexbox and how.
Zoe Gillenwater gave a talk At SmashingConf last year entitled Leveling Up with Flexbox. She addresses head on that we don’t have to wait to use flexbox anymore, we can start using it today. She explains that the syntax is stable, browser support is strong, and then goes on to review some practical examples, including a flexible navigation.
Also, our fellow Lincoln Looper Joni Trythall put together this Flexbox Cheatsheet Cheatsheet that provides a great visual on getting started.
The general theme throughout all these resources seems to be the same. We can use flexbox right now. We can make our jobs easier and more efficient right now.
Logo Demo
The little logo we drew up for this project is perfectly suited to be recreated with flexbox. Our HTML is a simple structure and it only takes a few lines of CSS to get the effect we want. We’re using a few tricks here, so let’s take a look!
See the Pen Flexbox Friday logo by Lincoln Loop (@lincolnloop) on CodePen.
.logo is our main container and we’ll need to flexbox-ify it:
display: flex;
flex-wrap: wrap;
This sets .logo to be a flexible container (that’s all it takes!) and specifies that items should wrap when we run out of space.
Next, we’ll need to tell each .letter how to behave:
.letter {
$spacing: .5%;
flex: 0 1 calc(100% * 1/7 - #{$spacing}*2);
margin: $spacing;
font-size: 14vw;
}
We’ve boiled this down strictly to the layout and responsive bits. The most important line here is flex: 0 1 calc(100% * 1/7 - #{$spacing}*2); which tells the browser that each letter should:
- Never grow (via
0as the first parameter) - Be allowed to shrink by a factor 1
- And have a base size equal to 1/7 minus our margins (.5% on each side)
calc() and flexbox make for an awesome combo! The last line of interest is font-size: 14vw which specifies that each letter should be equal to 14 viewport width units.
TL;DR
Float nothing, flex everything, only on Fridays.
