New terms from treehouse – CSS Layout Techniques Part 2 – Positioning Schemes and Flexbox Layout

Positioning Schemes

Relative Positioning

In this example we’ll use relative positioning to set up the header. We start with this:

Screen Shot 2014-06-24 at 2.10.59 PM

With relative positioning, elements are still in the normal document flow, but they don’t influence the layout of the surrounding elements. This is because the positional offsets we provide position it relative to its original position. We’ll start by setting the logo and nav to position:relative and give the logo a width.

Screen Shot 2014-06-24 at 2.14.49 PMScreen Shot 2014-06-24 at 2.13.30 PM

Now, if we were to style the logo bottom:20px;, it would offset it 20px up from the bottom from its original position.

Screen Shot 2014-06-24 at 2.16.57 PM Screen Shot 2014-06-24 at 2.16.50 PMIf we were to change it to top:20px;, it would move it 20px from the top.

Screen Shot 2014-06-24 at 2.17.59 PM

Screen Shot 2014-06-24 at 2.18.05 PM

If we were to do right:20px;, it would move to the left, and it we were to do left:20px; it would move to the right. Notice also how the nav elements are not affected or moved by the logo.

Screen Shot 2014-06-24 at 2.19.44 PM

Screen Shot 2014-06-24 at 2.19.59 PM

Next, we’ll reposition our main nav so in it’s inline with our logo. To move it up, we’ll give it a bottom: 32px; and to move it to the right, we’ll give it a left: 200px;.

Screen Shot 2014-06-24 at 2.22.29 PMScreen Shot 2014-06-24 at 2.22.37 PM

Now, because the header and nav are block level elements, They’re both still taking up an entire line or block on the page. And since they’re still in the normal document flow, the positioning offsets we defined are causing the logo and nav to overflow its parent header container, causing the big gap on the right.

Screen Shot 2014-06-24 at 2.25.01 PM

The best way to fix this is by giving the header an overflow value of hidden.

Screen Shot 2014-06-24 at 2.27.19 PM Screen Shot 2014-06-24 at 2.27.08 PM

Absolute positioning

Relative positioning also serves as a positioning context for absolute positioning, because an element with absolute positioning will always be relative to its first parent that has a relative position. If no parent element has that, the browser viewport will be the positioning context.

We’re going to use absolute positioning to style this header. Here’s what we’re starting with:

Screen Shot 2014-06-25 at 9.38.28 AM

First, we need to establish the header container as position:relative. Then we’ll set the logo and nav elements as position:absolute;

Screen Shot 2014-06-25 at 9.42.20 AM Screen Shot 2014-06-25 at 9.42.08 AM

As you can see, this positions them in the top left part of the container header div by default. The space we’re seeing is the padding applied to the header container (not the logo), and the margins given to the list items. However, if we were to select the logo and set its top and left offsets to 0…

Screen Shot 2014-06-25 at 9.45.18 AMScreen Shot 2014-06-25 at 9.45.30 AM

The key thing here is 0 will put it at that edge of its parent container, and a positive value will move it away from it.

So, when absolute positioning is used, the element is completely removed from the normal document flow, so it no longer affects the positioning of other elements (like the nav items).

You can use negative values as well, which can move elements outside of their parents.

Screen Shot 2014-06-25 at 9.47.55 AMScreen Shot 2014-06-25 at 9.48.05 AM

We’ll use offsets now to position the elements.

Screen Shot 2014-06-25 at 9.49.47 AM Screen Shot 2014-06-25 at 9.49.36 AM

Now, let’s say we wanted to put the nav items on the right.

Screen Shot 2014-06-25 at 9.51.18 AM Screen Shot 2014-06-25 at 9.52.08 AMThe downside to the absolute positioning is that we’ll need to make sure there’s a height in the containing element, otherwise it will collapse. For example:

Screen Shot 2014-06-25 at 9.53.18 AMScreen Shot 2014-06-25 at 9.53.25 AM

Unfortunately there’s no clearfix for this like there is for floats, so you’ll need to make sure there’s always a height for the container.

Next, we’ll want to reposition the three columns of content using absolute positioning.

Screen Shot 2014-06-25 at 9.55.15 AMLike before, we need to set the containing element (.content-row) to position:relative;. Then, we’ll set widths for the columns and position them absolute.

Screen Shot 2014-06-25 at 9.59.42 AM Screen Shot 2014-06-25 at 9.59.28 AM

Now, we’ll give the columns positioning offsets. Give the .primary-content a new width and position it 30% from the left, and the .secondary one right on the right.

Screen Shot 2014-06-25 at 10.01.57 AM Screen Shot 2014-06-25 at 10.01.46 AM

Once again, because we’re using absolute positioning, we need to set the height of the parent containers to 100%, or the content-row will collapse, which is why the footer is jammed up in there.  For some reason I had to do it for .main-wrapper and .col as well, so I guess it’s for all containing parents.

Screen Shot 2014-06-25 at 10.03.53 AM Screen Shot 2014-06-25 at 10.03.46 AM

We can also now add more content above and below, and also remove the wrapper styling without breaking the layout.

Screen Shot 2014-06-25 at 10.06.43 AMScreen Shot 2014-06-25 at 10.06.50 AM

Fixed Positioning

Best example of this is with a fixed header. Once again, we’re starting with this:

Screen Shot 2014-06-25 at 10.48.13 AM

First, we’ll give the main-header container a width:100% and position:fixed; Because we’ve given it that position, we can now use the top, bottom, left and right offsets we’ve used before, so we’ll also give it a top:0; to make sure it stays at the top.

Screen Shot 2014-06-25 at 10.51.46 AM  Screen Shot 2014-06-25 at 10.51.19 AM

The second screen shows an issue – since the columns are positioned absolute, they have a higher z-index than the header which has position:fixed;. To fix this, give it a z-index of anything higher than 1, since we haven’t specified one for the columns. Though you wouldn’t normally set up the columns with absolute positioning, it’s good to keep z-index in mind.

Screen Shot 2014-06-25 at 10.54.06 AM Screen Shot 2014-06-25 at 10.53.44 AM

If we wanted the header to be at the bottom of the page, you’d simply change it to bottom:0;

Screen Shot 2014-06-25 at 10.55.09 AMScreen Shot 2014-06-25 at 10.55.33 AM


When the header is position:fixed, it’s also being taken out of the normal document flow, as you can see in the example below. It’s not affecting/pushing down the position of the banner like it would in the normal document flow, and is instead covering it.

Screen Shot 2014-06-25 at 10.51.37 AM

To fix this, add some top padding to the body of the page. Since the header is 100px tall, we’ll use 100px.

Screen Shot 2014-06-25 at 10.59.35 AM Screen Shot 2014-06-25 at 10.59.28 AM

Absolute Centering

There’s a quick and easy way to center absolutely positioned elements inside their parent container. We’re going to make an icon with a pseudo element then center it vertically and horizontally.

Screen Shot 2014-06-25 at 11.07.40 AMFirst, we’ll need to set a relative positioning context for the icon, so that any child or pseudo element will be relative to its width and height.

Screen Shot 2014-06-25 at 11.09.25 AM

We’ll then set up a pseudo element. Content will be blank, display will be block, and we’ll set the width and height we want. Then, we’ll use background to set the background image url, and set background-size:100%, which means it will use the width and height we just specified. Then, we’ll set it’s position to absolute.

Screen Shot 2014-06-25 at 11.34.19 AMScreen Shot 2014-06-25 at 11.33.47 AM

Now w’ll give it some offsets to center it. If we set all four ones to 0, and set the margins to auto, it will position it right in the center.

Screen Shot 2014-06-25 at 11.36.29 AM

Screen Shot 2014-06-25 at 11.36.13 AM

Flexbox Layout

Still tough to decide whether to use today. It’s awesome, but the browser support for it is very weak for older browsers. Flexbox is source order independent, so you can layout elements in any direction/order regardless of where they’re written in the markup.


Building a navigation with flexbox

Starting with this:

Screen Shot 2014-06-27 at 12.34.08 PM

Notice how the header logo has been added as a list item to the main nav. This will make it easier for us later.

Screen Shot 2014-06-27 at 12.34.14 PM

First, we need to establish a flex formatting context. We do this with display:flex; By doing so on the .main-nav, we make the list items inside it flex items, which by default lays everything out in a row, in what’s called the flex direction. This let’s us layout the list items in all sorts of different ways.

Screen Shot 2014-06-27 at 12.40.24 PMScreen Shot 2014-06-27 at 12.40.37 PM

For perfectly vertically aligned elements, we can set the li’s to align-self:center;. We also need to set a height for its parent container.

Screen Shot 2014-06-27 at 12.39.45 PMScreen Shot 2014-06-27 at 12.39.54 PM

Next we’ll give them some margin left and right.

Screen Shot 2014-06-27 at 12.42.47 PM Screen Shot 2014-06-27 at 12.42.37 PM


Now, with flexbox, margins can have a pretty significant effect on flex items. Let’s say that we wanted to put the nav items on the right hand side and keep the logo on the left. We’ll use .main-logo:first-child because it’s more specific than the .main-nav li descendent selector above. When we set margin-right to auto, it absorbs all the extra space and pushes the remaining list items to the right.

Screen Shot 2014-06-27 at 12.49.06 PMScreen Shot 2014-06-27 at 12.49.18 PM

For now, we’ll keep it at 50px.

Screen Shot 2014-06-27 at 12.50.23 PMScreen Shot 2014-06-27 at 12.50.27 PM

We can use the flex-grow property to control the amount of space the flex items take up in the main nav. If we want all the links to be evenly spaced, we can do flex-grow:1;. The value 1 represents the ratio of free space we want them to take up.

Screen Shot 2014-06-27 at 1.14.04 PM Screen Shot 2014-06-27 at 1.13.58 PM

If we want the logo to be bigger, simply give it a larger flex-grow value of 2, which makes it take up twice as much space of a flex item with the value 1.

Screen Shot 2014-06-27 at 1.15.06 PM Screen Shot 2014-06-27 at 1.14.04 PM

For this to work in Safari, we must copy the flex declarations and use the -webkit- prefix.

Screen Shot 2014-06-27 at 1.17.58 PM

IE10 uses a whole different syntax, which thankfully we won’t be going into today.

Animating Flexbox

In this example, he’s added data icons to each nav link, whose values are html unicode characters. He’s using a before psuedo element to insert the content based on the value of the data-icon attribute set.

Screen Shot 2014-06-28 at 12.26.36 PM

Screen Shot 2014-06-28 at 12.28.41 PMScreen Shot 2014-06-28 at 12.26.44 PMThey’re currently positioned absolute, to get them inside the nav links, we’ll give the links a relative positioning context. The logos will then be position 10px from the top of the nav link area.

Screen Shot 2014-06-28 at 12.34.09 PMScreen Shot 2014-06-28 at 12.34.19 PM

Next, we’ll position them with a left:-30%;, and add an overflow:hidden to the nav links, to hide them.

Screen Shot 2014-06-28 at 12.36.14 PMScreen Shot 2014-06-28 at 12.36.37 PMScreen Shot 2014-06-28 at 12.36.23 PMScreen Shot 2014-06-28 at 12.36.28 PMNow, we’ll make it so that when you hover the icons appear. We’ll select the a under .main-nav, when you hover it selects the pseudo element and moves it over 10% from the left.

Screen Shot 2014-06-28 at 12.39.45 PMScreen Shot 2014-06-28 at 12.39.54 PM

We’ll add a transition to make it look nicer.

Screen Shot 2014-06-28 at 12.41.28 PMaa

Now, we’ll make the flex items grow on hover. We’ll select li items when hovered that are not the .main-logo (cause we don’t want that to expand), and give them a new flex-grow. Then, we’ll select main-nav list items and give them a transition to make it smoother.

Screen Shot 2014-06-28 at 12.45.31 PMaassThe transition also works on mobile devices.



Flexbox Columns

Now we’ll layout the three columns with flexbox. Starting with this:

Screen Shot 2014-06-28 at 12.51.01 PM

First we’ll create that flex formatting context in the containing .content-row element. This makes the child elements act as flex items, which puts them in a row, and the stretch to fill the container both horizontally and vertically.

Screen Shot 2014-06-28 at 12.50.54 PMScreen Shot 2014-06-28 at 12.51.08 PM

To have the columns be evenly distributed, we can give them a flex value of 1.

Screen Shot 2014-06-28 at 12.53.10 PMScreen Shot 2014-06-28 at 12.53.22 PM

Now, let’s say we want primary-content column to take up twice the amount of space. Simply select it and give it a flex value of 2.

Screen Shot 2014-06-28 at 12.54.47 PM Screen Shot 2014-06-28 at 12.55.19 PM

Once again, we can change the order of the columns without changing the markup. If we want primary content to be first, we can use the order property.

Screen Shot 2014-06-28 at 12.57.22 PM Screen Shot 2014-06-28 at 12.57.06 PM

To swap the extra and secondary content ones, select the extra content and give it an order of 1.

Screen Shot 2014-06-28 at 12.58.25 PMScreen Shot 2014-06-28 at 12.58.33 PM

Lastly, once again we need to include the vendor prefixes so it works in Safari.

Screen Shot 2014-06-28 at 1.00.16 PM

Providing fallbacks with Modernizr

This will allow us to provide fallbacks for browsers that don’t support Flexbox. It detects if a feature is supported by a browser, and if it doesn’t, it falls back to conditional CSS we write in the stylesheet. It lets you select which features you want to detect for. Then you download the js file and simply link it in the head section like any other one.

Screen Shot 2014-06-28 at 1.04.32 PM

You’ll know it’s working when you see class=” js flexbox” the html element when viewing the page source. This means that javascript is enabled in the browser, and that it supports flexbox. If it didn’t, it would display no-flexbox, which we can use to provide fallback styles for browsers that don’t support it.

Screen Shot 2014-06-30 at 2.17.39 PM

Screen Shot 2014-06-30 at 2.21.05 PM


To do this, we’ll find where we put our flexbox styles and adjust them. For display: flex in .main-nav, this is fine because if a browser doesn’t support it it will go back to the default display value, in this case block.  We need a fallback for the list items. So, we select the class .no-flexbox, then any list items in the class .main-nav inside of that.

Screen Shot 2014-06-30 at 2.24.59 PM

Next, we’ll fix the columns.

Screen Shot 2014-06-30 at 2.26.29 PM Screen Shot 2014-06-30 at 2.26.59 PM

Lastly, we’ll fix the icons by adjusting their position when you hover.

Screen Shot 2014-06-30 at 2.28.17 PM Screen Shot 2014-06-30 at 2.28.08 PM




New terms from treehouse – CSS Foundations Part 4 – CSS Gradients and Flexbox and Multicolumn Layout

Gradient city, population me

With gradients, you can create gradual fades between two colors. You can control the angle, shape, size and transition to make interesting effects and patterns. Because no images are required for these, we can increase performance by decreasing load times for our pages.

There have been three different versions of the syntax since it was introduced in 2008. Fortunately, the latest version is supported by the major browsers. For a lot of them though you used to need to use the prefixed syntax, where you put -webkit- before the linear-gradient property to make them work properly. Now you can just use the unprefixed syntax though.

A gradient isn’t a real CSS color. It’s actually an image with absolute dimensions and no fixed size. It’s actual size by default matches the size of the element it’s applied to. Can be used for any property that accepts images. Commonly used for backgrounds, buttons, shading and background images.

Linear gradientscreated when two or more colors are defined along the gradient line, which gives the gradient its direction. To create one, you just need to specify two comma separated color values, which can be keywords, hex, rgba, hsla, etc.

grad line

code fixScreen Shot 2014-05-16 at 9.29.32 AM

By default it goes top to bottom of the element. You can adjust this by adding the keyword bottom before the first color, followed by a comma space. This will make it go from blue to orange, top to bottom.

code fix2

You can make it run diagonally by specifying the horizontal and vertical starting positions. Simply add right after bottom with no comma between to do that. You can see now the gradient begins at the bottom right corner. If we wrote (top left, orange darkblue), it would start from the top left and go orange to dark blue.


For more control, you can define degree parameters. The angle is specified as counterclockwise. So 0 degrees would make a horizontal gradient from left to right. 90 degrees would make it go from bottom to top. 45 degrees would start from the bottom left corner.

0deg0 9045
Color stops allow you to control the progression of color change in the gradient. Each color stop should have one or two components – a color component, and an option position component. At the very least, you can define a list of colors. The area between each will be filled with a transition from one color to another. Since we didn’t add any position keywords, they’ll be displayed in the order listed. You can set as many color stops as you like.


You can control the position of any of the stops by putting it in a space after the color. So 50% would mean that green has to start 50% along the length of the gradient. So at 50% is where the gradient is 100% green. The browser will then easily distribute and fade the other values. Tj


The position can also be a pixel length. So 100px means the green starts 100 pixels from the top, meaning that’s where it’s 100% green.


If you use two or more color stops in the same color stop position, it will result in a sharp color change, because they will start at the same position.

px3 px2

Unprefixed Syntax – Doesn’t require -webkit- before the property. With the new syntax, you can create gradients just like before with two or more comma separated colors, but angles and directions work differently. To change the direction you must use the keyword to followed by the direction values top, bottom, left, right.

So, for a gradient going left to right, before you’d just right “left”, but with this you need to write “to right”. To reverse it and have the colors go from right to left, you’d set it to “to left”. “to bottom”is the default value, and would make it go from top to bottom.

to right code to right

To do diagonals, you just add another directional keyword in there. “to top left” would create a gradient that goes from the bottom to the top left. To reverse this, you’d write “to bottom right”.


The degree angles set for the unprefixed syntax are done differently as well. In the prefixed syntax, 0deg would make it go from left to right. In the unprefixed syntax, it makes it go from bottom to top. The angle directions then continue rotating clockwise, unless a negative value is specified. 90 would make it go left to right, 180 would make it go top to bottom, and 270 would make it go right to left.



Because all major browsers now support the new, unprefixed syntax, you should use that.

Radial Gradients – are gradients that have a starting point and smoothly spread out in a circular or elliptical shape. They’re basically linear gradients that start from the center point of a circle. They’re defined using the radial-gradient funcitonal notation. Once again, there’s a -webkit- variety, which this will go over.

By default, the shape of a radial gradient is an ellipse, and it has the same proportions as the containing element. Notice how it starts in the center and then spreads out to the other color.

rada rad1

To change the shape from elliptical to circular, just add the circle keyword before the list of colors, separated by a comma. It also will no longer follow the divs proportions like the elliptical shape does. Notice how you can see more blue on the left and right now.

radb rad2

You can position where the gradients center should be within the element by putting two values before the circle/color ones. First value is horizontal position, and the second value is for the vertical. This is very similar to how the background-position property sets the position of a background image. 150px 50px would make it 150px from the left and 50px from the top.


You can also use percentages for this, which are based on the dimensions of the box. Like background-position, if you only define one value, the second one will default to “center”.


There are other keywords to change the gradients ending shape. closest-side makes the ending shape meets the sides closest to its center, which in the example below is the vertical sides because the width is larger than the height.


If the height was larger, it would stop there instead.


With elliptical, it meets both the horizontal and vertical sides closest to the center.



With closest-corner, the ending shape is sized so it meets its closest corner from its center.

cc1acc1cc1b  cc2

farthest-side makes it so the ending shape meets the sides that are farthest from the center. In the example below, you can see it expands to the top left corner.


farthest-corner is the opposite of closest-corner, so the gradient’s ending shape is sized so it meets the farthest corner from the center. In the example below, you can see it sizes to meet its farthest corner, the bottom left. This is actually the default value, so you can omit it and it will maintain that end shape.


color stops are defined as a list, just like for linear gradients. The first color defined starts from the center, and then moves out from there. You can also add color stop position values in percentages, pixels or em units. So in the example below, dark blue reaches its full color value 30% from the center and the green value reaches its full green hue 600px from the center of the gradient.

cc7 cc8

With radial gradients, the gradient line extends out from the center point in all directions. So you can go beyond 100% depending on your desired result. So by setting green to 120% below, it’s full hue actually extends beyond the box.


You can make cool shapes with these.


Radial gradients – unprefixed syntax. Like unprefixed linear gradients, there are some differences here on how you do things.

You can still create a gradient like this with two comma separated color values, and the color stop position, shape and size values haven’t changed either, just how you order them. Notice how you now have to at the keyword “at” for the unprefixed version.


So in the example below, notice how it starts on the right and goes left, and is vertically aligned to the center. The value top would have it go from top to bottom.

c2 c1

Remember, if you only have one position value, the second one will default to center. Here, we define a second one.

c3 c4

In the example below, the gradient is 30% from the left, and 15% from the top, and the ending shape is sized to meet the sides farthest from its center.


Gradients can also be used as transparent full page backgrounds. Setting the second color to the keyword transparent gives you this:


To fix that, you need to give the html element a height of 100%. This gives you:


To adjust the size of the gradient, simply add a color stop position after the transparent value.


You can overlay this over a background image as well.



The transparent actually refers to a transparent rgba value of black. It’s exactly the same as using rgba(0,0,0,0). However, this can sometimes lead to a light grey part in the transition of the gradient. To fix this, use a rgba value of white instead: rgba(255,255,255,0).

Repeating gradients – gradients that repeat infinitely in any direction, They are essentially extensions of linear and radial gradients. They’re like background images that repeat infinitely horizontally and vertically. Syntax is the similar to before. You’ll need two color values, and one color stop position. Note in the example below how each repeat is spaced out by 50px, as defined by the color stop.

no1 r1

Since there is no color stop defined for the first color, it defaults to zero. If you were to add one of 20px, you can see how it shifts and they’re now spaced out by 30 pixels, which is the difference between 50px and 20px.

no2 r2

If the gradient does not start and end with the same color, it results in a sharp transition, as you can see above. To fix this and get a smoother transition, you add the first color as the last color with another color stop. The transition now is 50px, aka the difference between 70px and 20px.

no3r3Like with other gradients, you can add a keyword to change the direction of the gradient. Because I’m using the unprefixed syntax, I put “to right” in there.


Using the degrees position, we can make a nice diagonal pattern.

no5 r5

We can make other cool patterns like this:


You can have infinite radial gradients as well.


no8 r8

Resizing the element it’s the background for will affect the gradient.


Resource: – helps you generate gradients. It can even take an image and make it into a CSS gradient.

For gradients, always include a fallback color or image for older browsers.

Flexbox and Multi-Column Layout

CSS layout was previously done with floats, blocks, and inline formatting, but they were not designed for today’s complex layout demands. Floats may require a lot of clear fixes, absolute positioning takes elements out of the normal document flow, etc.

Flexible Box Model aka Flexbox is the future of CSS layouts, a simple yet powerful feature for distributing space and aligning content. It’s supported in most modern browsers, except for Safari, which still requires the -webkit- prefix. It handles 2-d layout really well, because you can layout elements in any direction, and make boxes grow, shrink and autofill space. It makes it easy to align elements with respect to their container or each other, and to make them have the same height.

It consists of flex containers and flex items. Every direct child of a flex container is a flex item, and there can be as many you’d want. It defines how the items are defined inside the container. The container can have multiple flex lines, which break the flex items into multiple lines, and by default go left to right and top to bottom.


It has two axises, the main and cross axis, which determine the baselines of the flex containers. The default direction of the main axis is left to right, and the default direction of the cross axis is top to bottom.


First, you need to establish a flex formatting context for the page. By setting display: flex, you make that element the flex item containing box, where children of that will become the flex items. NOTE: In the following examples, I use the -webkit- prefix, even though it’s not required for chrome or FF.


The flex-direction property lets you control the direction of the flex items. It’s default value is row, which gives you what you see above. row-reverse swaps the start and end positions.


The column value swaps the main axis and the cross axis, so the flex items are laid out vertically. What you see below is actually what it looked like prior to setting the display of .nav to flex.


column-reverse does what you’d expect:


The justify-content property adjusts the positions of flex items on the main axis. The value space-between moves the first list item to the left, and the last to the right, and divides up the space in between.

sb cs

The flex-end value moves all the items to the end of the flex line, and center centers them.


Margins also have an effect on flex-items in particular the auto value which will absorb extra space and push the flex items into different positions. In the example below, we’re using the space-between value, but the extra space has been absorbed by the margin-left:auto for the last child.

lclc1 1 f

Now, what if you’re using space-between with a lot of li’s in a small viewport?


They overflow, but you can easily fix that with the flex-wrap property and setting it to wrap, which does this:

1 234 5

Once again, a flex item is any direct child of a flex container.

The flex-grow property lets you determine how much the flex item will grow relative to the other flex items. In the example, the value was “1”, which represents the ratio of space taken up by the list items. 1 will make the free space evenly distributed and so that the li’s take up the same amount of space.

c 1

The flex property can also be used. In the example below, the third column grows twice as big and the remaining space is evenly distributed between the other two columns.

cc 2

If we set it to 3, it will be three times the size of the other columns.


The order property lets you change the order of the columns. If you set column c to -1, it will move it to the beginning of the row.


You can use flexbox to vertically align boxes as well. The align-self value lets you do that. The center value centers the content vertically.

c5 5

The flex-end value aligns the margin edge of the column with the end.


The default value for align-self is stretch, which will make all elements have the same height.


You can adjust the layout of the columns with media queries. Right now, when the browser width is below 1000px, the columns become too narrow.


In the example below, the new styling is applied anytime the browser is smaller than 1000px. Remember, the column value switches the main and cross axises, so the list items are laid out vertically.

c1 1

When using flexbox, you want to make sure it displays well for browsers that don’t yet support it.

Resource: detects flexbox support and provides fallback solution if needed.

Multi-Column Layout resembles flexbox layout in that it gives us a lot of layout flexibility, the difference is that this is designed for text layout, or multiple text columns. It introduces a new type of container that lets content flow from one column to another, and the number of columns can vary based on the viewport size. It’s purpose is to make things scalable.

It’s currently only supported in IE and Opera (lol wut), for everything else you need the -moz- prefix for firefox and the -webkit- prefix for chrome and safari.

Starting with:


The column-count property let’s you specify the number of columns. If we set the value to 3, no matter how wide the screen is, the content will always be split into 3 columns.

c1 1


The column-gap quality lets you set how big the gap is between them.

c2 2

The column-rule properties defines the rules or borders between each column. The values. column-rule-width defines the width, column-rule-style defines the style and can accept dashed, dotted, solid, etc like the border property, and column-rule-color sets the color.


common-rule is the shorthand property for those.



The column-width property lets you define how thick the columns are. Setting it to 250px makes sure the columns will always be 250px wide, so it’s kind of like max-width for these columns, as the column count will change based on the browser size, making it great for responsive web design.

col abc

columns is a shorthand property for column-count and column-width.


Images will follow this flow as well, but you’ll likely need to make some adjustments. a


The max-width of 100% makes sure that it always takes up the max-width of its column. This will ensure it flows and will resize with the columns when the browser is resized.

c11   23

The column-span property lets you define how many columns the content will take up. The value all will be for all columns, regardless of how many there are on the page.

c h


Anddddd…. I went through that much quick than expected. Sweet. On to the next sections.