Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
flexbox

41 Articles
{
,

}
Direct link to the article Squeezy Stretchy Flexbox Nav
flexbox navigation off-canvas

Squeezy Stretchy Flexbox Nav

I saw an interesting take on off-canvas navigation the other day over on The New Tropic. It wasn’t the off-canvas part so much. It was how the elements within the nav took up space. They stretched out to take …

Avatar of Chris Coyier
Chris Coyier on Feb 20, 2017
Direct link to the article The Media Object, A Bunch of Ways
flexbox float grid layout tables

The Media Object, A Bunch of Ways

The Media Object pattern is: image thingy on the left, heading and text on the right.

That’s what Nicole Sullivan called it and the name stuck. It’s a pretty simple pattern, but like all things web design, it can …

Avatar of Chris Coyier
Chris Coyier on Jan 28, 2017
Direct link to the article Sticky Footer, Five Ways
flexbox footer grid sticky footer

Sticky Footer, Five Ways

The purpose of a sticky footer is that it “sticks” to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the …

Avatar of Chris Coyier
Chris Coyier on May 25, 2016 (Updated on Jan 29, 2020)
Direct link to the article Should I use Grid or Flexbox?
flexbox grid

Should I use Grid or Flexbox?

Two sentences from Rachel Andrew that explain when to reach for which layout choice:

Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two

…
Avatar of Robin Rendle
Robin Rendle on Apr 13, 2016
Direct link to the article `flex-grow` is weird. Or is it?
flexbox

`flex-grow` is weird. Or is it?

The following is a guest post by Manuel Matuzovic. It illustrates how flex-grow works, weird quirks and all. Then he goes into several examples on how common layout patterns may be implemented using flex-grow and flex-basis.

When I …

Avatar of Manuel Matuzovic
Manuel Matuzovic on Dec 26, 2015 (Updated on Apr 10, 2017)
Direct link to the article flex-grow
flex-grow flexbox

flex-grow

The flex-grow property is a sub-property of the Flexible Box Layout module.

It defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of …

Avatar of Chris Coyier
Chris Coyier on Apr 18, 2013 (Updated on Aug 4, 2021)
Direct link to the article align-content
align-content flexbox

align-content

The align-content property is a sub-property of the Flexible Box Layout module.

It helps to align a flex container’s lines within it when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the …

Avatar of 34 Cross
34 Cross on Apr 17, 2013 (Updated on Jul 28, 2021)
Direct link to the article A Complete Guide to Flexbox
flexbox layout

A Complete Guide to Flexbox

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.
Avatar of Chris Coyier
Chris Coyier on Apr 8, 2013 (Updated on May 20, 2024)
  • Newer
  • 1
  • ...
  • 2
  • 3
  • 4

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top