Cut the Code and Start Flexin’

That’s right, cut your code with flexbox to make your webpage look fly and free. Flexbox, flexible boxes, box flex, flex flexin’, whatever you may call it, was implemented in CSS3 surpassing the block model allowing elements to behave more predictably upon different screen sizes. Using flexbox eliminates the float property thus cutting your code down a bit.

Flexin’ Comes With a Price

No no no, not an actual price tag but rather the issues and problems that come with the use of the flexbox property. While it may cut down your code, the major drawback of using flexbox is performance issues with the webpage. Yes, flexbox can severely slow down your page and loading time especially if it is an extensive project; browser compatibility is another thing to keep in mind as flexbox is not supported by Internet Explorer 9 (but who uses that anyways).


flex-direction

.flex-container {

flex-direction: row;

}

Determines how flex items are laid out within the flex container usually in two directions, horizontally and vertically. In this example, items in the flex-container are laid out by rows, but could also be set to columns, row-reverse, and column-reverse.

flex-wrap

.flex-container {

flex-wrap: nowrap;

}

Controls if the flex-items are laid out in one line or multiple lines and the direction that these lines are stacked. In this scenario, the items are displayed in one row and by default are shrunk to fit the container’s width; by using wrap instead of nowrap, items are displayed on multiple lines.

flex-grow

.flex-item {

flex-grow: 1;

}

Specifies the growth factor, determining how much the flex item will grow in size relative to the other items when free space is distributed within the flex container. The number 1 in this case, sets all flex items to have the same size within the container.


During research on flexbox, I came across a YouTuber named, “The Net Ninja” who creates videos teaching different aspects of web development. He split up the basics of flexbox into 12 short tutorials showing how to implement it into your webpage; this turned a 35 minute lesson into chunk size videos that were easy to listen and understand. For those who like less visuals and more in-depth reading and explanation, I found great advice and material from W3Schools, CSS-Tricks and Scotch.io. Aside from in-depth explanations, each of these three websites had simple graphics that helped to visually understand each property of flexbox and when to use it. Definitely look into these websites if you’d like to learn more on flexbox so that you too can cut your code and start flexin’.