Skip to main content
CSS-Tricks
Since 2007
  • Articles
  • Guides
  • Almanac
  • Links
  • Picks
  • Newsletter
  • Search

Articles Tagged
flexbox

44 Articles
{
,

}
Direct link to the article Does CSS Grid Replace Flexbox?
flexbox grid

Does CSS Grid Replace Flexbox?

No. Well. Mostly No.

Grid is much newer than Flexbox and has a bit less browser support. That’s why it makes perfect sense if people are wondering if CSS grid is here to replace Flexbox.

To put a point on …

Robin Rendle on Mar 31, 2017
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 …

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 …

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 …

Chris Coyier on May 25, 2016
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

…
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 …

Manuel Matuzovic on Dec 26, 2015
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 …

Chris Coyier on Apr 18, 2013
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 …

34 Cross on Apr 17, 2013
  • Newer
  • 1
  • ...
  • 3
  • 4
  • 5

CSS-Tricks is powered by DigitalOcean.

Get Curated Front-End Roundups Right in Your Inbox

Coming back really, really soon! See past issues →

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