Tag: flexbox

Learn how to use the CSS gap property, which makes it super easy to add space between elements without the need for hacky margin solutions.

Flexbox came first. Then came Grid. Is Flexbox needed any more? Yes it is! Learn what each does best and when to choose one over the other.

Tiffany Brown introduces Flexbox, explaining the basic principles behind flex layout, with examples of laying out a basic media object, flexible form components, vertical centering, and creating grid-like layouts, as well as explaining when to use Flexbox over CSS Grid.

Diogo Souza walks through how to convert a traditional, float-based layout into one that harnesses the benefits of CSS Flexbox & Grid — while discussing graceful degradation and progressive enhancement along the way.

Ahmed Bouchefra introduces key Bootstrap CSS classes for building layouts with the Bootstrap grid system, along with a quick introduction to using Flexbox.

Giulio Mainardi shows you how to build a Trello layout using CSS's new Grid Layout Module features and Flexbox, along with some Sass for efficiency.

Kalpesh Singh uses Flexbox features to build a mega drop-down navigation menu, a well known design feature that many incorporate into large websites.

George Martsoukos shows how to build a simple Flexbox and jQuery plugin which sorts elements based on the values of their custom data attributes.

Craig Buckler explores the new possibilities available for HTML developers to design and create forms using Flexbox in CSS.

Maria Antonietta Perna introduces Cutestrap, a brand new Sass-based CSS framework to fast-track your front-end development projects. 

Kitty Giraudel uses SitePoint's tiles as a case study for component encapsulation, theme management and flexbox.

George Martsoukos looks at Flexbox and how to use z-index and auto margins in your CSS layouts.

George takes a look at a few different techniques for building a mobile-first, responsive image grid using flexbox and calc().

Bashkim Isai works off an idea presented by BBC's developers to help you get up and running with flexbox with safe fallbacks for legacy browsers.

Nick Salloum looks at the basics of flebox, along with a history lesson of the spec changes, and answers the all-important question: Are we ready to use it?