• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

What is flex: 1 shorthand for?

CSS · July 26, 2022

If you have used Flexbox before in CSS, you might have used the shorthand property flex: 1. And if you’re like me, you might have been using it but forgotten or not even known what this is shorthand for.

I know to use this shorthand when I have Flexbox items that I want to take up the rest of the space. It’s perfect for situations where you have an image on the left and a box of text on the right (product image and product name + price).

The shorthand translates to the following:

  • flex-grow: 1
  • flex-shrink: 1
  • flex-basis: 0

We won’t explain what each property does in detail because you have most likely used the non-shorthand versions before. But, we know this tells the browser we want an element to grow and shrink to the available space inside the Flexbox element.

Dwayne

Leave a Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • How To Mock uuid In Jest
  • How To Decompile And Compile Android APK's On A Mac Using Apktool
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • Wild Natural Deodorant Review

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz