CSS Styling Using Flexbox


This week I added some style to my blog using CSS and Flexbox. This post summarizes these concepts and describes how I applied them to my site.

CSS stands for Cascading-Style-Sheets. CSS is a language for specifying how documents are presented to users — how they are styled, laid out, etc.

The Flexible Box Module (Flexbox) is a new layout mode that was introduced CSS3. See this article by spaceninja, “What is Flexbox, An elegant layout method for a more civilized age” for a great background on the origin and purpose of Flexbox.

When a browser displays a document, it actually displays a combination of the document’s content with its style information. Web browsers convert the document’s content (the HTML) and style information (CSS) into the Document Object Model (DOM). When you view a webpage you are actually viewing a display of the contents of the DOM.

I created the CSS style sheet and linked it to my HMTL file. Then I used a great guide from markheath.net to incorporate Flexbox concepts into the CSS and HTML files.