{"id":13318,"date":"2016-06-28T12:19:10","date_gmt":"2016-06-28T16:19:10","guid":{"rendered":"https:\/\/webdevstudios.com\/?p=13318"},"modified":"2024-04-15T12:02:17","modified_gmt":"2024-04-15T16:02:17","slug":"getting-started-with-flexbox","status":"publish","type":"post","link":"https:\/\/webdevstudios.com\/2016\/06\/28\/getting-started-with-flexbox\/","title":{"rendered":"Getting Started with Flexbox: First Impressions, Tips, & Tricks"},"content":{"rendered":"

Recently, here at WDS, we started incorporating Flexbox<\/a> into our projects. I wanted to share some great resources I\u2019ve come across to get going with Flexbox and highlight some of the early first impressions and some of the struggles you might encounter along the way.<\/p>\n

And, if you want to see just a few examples of some of the types of stuff we\u2019ve been creating with Flexbox, be sure to check out our WebDevStudios Codepen page<\/a>.<\/em><\/p>\n

<\/p>\n

Getting Started<\/h3>\n

First, if you\u2019re new to Flexbox, I can not recommend a better starting place than Wes Bos’ flexbox.io<\/a> video tutorials. These are really great, quick videos that can easily get you up and running pretty solidly in less than a couple hours (if you watch them all). The only downfall is trying to go back and reference something is a little tricky with video. Not to worry–CSS-Tricks has you covered with this great guide <\/a>to check back with when getting the lay of the land.<\/p>\n

One of the trickiest and most difficult parts of implementing a new way of doing things is that there\u2019s definitely going to be a bit of a learning curve. Learning while doing is the absolute best way to force yourself to learn something new<\/strong>, however along with that comes the \u201cstruggle bus\u201d at times<\/a>, and that’s ok–it’s common. Theoretical practice is nice, but real implementation is, well, REAL, and can be tricky sometimes.<\/p>\n

Flexbox Hightlights<\/h3>\n

Let’s start by reviewing some of the benefits and positives to using Flexbox.<\/p>\n

Flexbox has the ability to create a variety of different layouts and ways to order items on a page to best fill the available space. This was\u00a0previously much more complicated especially when changing screen sizes and orientation.<\/p>\n

It\u2019s important to note that Flexbox is a module and not a single property. Some of the basic terminology can be found here from CSS-Tricks.com<\/a>. This\u00a0is a really good primer when you’re first trying to get started. Basically, there is a parent item, and it’s referred to as the flex-container<\/strong>.\u00a0Then, the children of the parent container are referred to as flex-item<\/strong>\u00a0(or items). This isn\u2019t all that different than using Bourbon<\/a> and Neat in terms of parent\/child relationships, which I touched on some time ago<\/a>.<\/p>\n

Once you have a handle on that, you\u2019re ready to start creating and laying out items–and you’ll find it easier than you have in the past! As I mentioned earlier, one of the best features is the ability to re-order flex items within a particular container, at least from my first impressions, I found this to be super easy and really helpful.<\/p>\n

Have you ever tried to do this with previous methods, grids, or even using Bourbon’s Neat? It\u2019s been possible<\/em>, but at times more difficult than needed to make it happen,\u00a0and it\u2019s always felt, at least to me, a little unstable when previously re-ordering items (particularly within breakpoints)…that is, prior to using Flexbox. They worked, but the way it’s handled by Flexbox is much nicer and feels much more intuitive.<\/p>\n

Flexbox\u00a0Ordering<\/h3>\n

This is a super simple example, but here you can see rather than display these blocks in numerical order, we\u2019ve put block #3 into the first position<\/em> by using the order property.<\/p>\n