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

Articles Tagged
flex-shrink

3 Articles
{
,

}
Direct link to the article Understanding flex-grow, flex-shrink, and flex-basis
flex-basis flex-grow flex-shrink flexbox

Understanding flex-grow, flex-shrink, and flex-basis

When you apply a CSS property to an element, there’s lots of things going on under the hood. For example, let’s say we have some HTML like this:

<div class="parent"<div class="child"Child</div<div class="child"Child</div<div class="child"Child</div</div
…
Avatar of Robin Rendle
Robin Rendle on Nov 10, 2020 (Updated on Nov 12, 2020)
Direct link to the article Holy Albatross with Widths
flex-grow flex-shrink flexbox max

Holy Albatross with Widths

Direct Link

Heydon’s Holy Albatross is a technique to have a row of elements break into a column of elements at a specific width. A specified parent width, not a screen width like a media query would have. So, like a container …

Avatar of Chris Coyier
Shared by Chris Coyier on Jul 24, 2020
Direct link to the article Making width and flexible items play nice together
flex-basis flex-shrink flexbox

Making width and flexible items play nice together

The short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.…

Avatar of Robin Rendle
Robin Rendle on Jul 1, 2019
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top