• Samantha Ming Logo Samantha Ming
  • Tidbits
  • Blog
  • Courses
  • Contact
Samantha Ming Logo
  • Home
  • Tidbits
  • Blog
  • Courses
  • Contact

  • Flexbox30
  • Newsletter
  • About
  • Invite me to speak
  • Become a sponsor

# Day 26: flex-basis vs widths

Here you can see very clearly that when an item has a flex-basis and a width. The browser will always use the value set with flex-basis . Again, another reason to use the proper flex way 😉

But watch out, if you also set a min-width and max-width. In those cases, flex-basis will lose and will not be used as the width.

Code Snippet of Day 26: flex-basis vs widths
Download HD Image
27. flex
  • Share to Twitter Twitter
  • Share to Facebook Facebook
  • Share to LinkedIn LinkedIn
  • Share to Reddit Reddit
  • Share to Hacker News Hacker News
  • Email Email

More Courses

  • CodeTidbits30

    - 30 days of the best JS, CSS, HTML tidbits 🎄

  • Web Basics

    - Web Basics Explained with Tidbits 🍎

  • Pictorials

    - Step by Step Code Tutorials 👣


Flexbox30

Learn Flexbox with 30 Code Tidbits ✨

  • 1 Introduction
  • 2 Flex Container & Flex Items
  • 3 Immediate Child Only
  • 4 Flexbox Axes
  • 5 Flexbox Module
  • 6 Parent Properties
  • 7 display
  • 8 block vs inline
  • 9 flex-direction
  • 10 flex-wrap
  • 11 flex-flow
  • 12 justify-content [row]
  • 13 justify-content [column]
  • 14 space-around vs space-evenly
  • 15 align-items [row]
  • 16 baseline
  • 17 align-items [column]
  • 18 align-content
  • 19 Child Properties
  • 20 order
  • 21 flex-grow
  • 22 flex-grow calculation
  • 23 flex-shrink
  • 24 flex-shrink calculation
  • 25 flex-basis
  • 26 flex-basis vs widths
  • 27 flex
  • 28 align-self
  • 29 Flexbox Properties
  • 30 Flexbox Cheatsheet
  • 31 Bonus: Flexbox with Auto Margins

Top Tidbits

  • Code snippet on Better Boolean Variable Names

    Better Boolean Variable Names

  • Code snippet on 3 Ways to Clone Objects

    3 Ways to Clone Objects

  • Code snippet on How To Truncate Number in JavaScript

    How To Truncate Number in JavaScript

  • Code snippet on Flatten Array using Array.flat in JavaScript

    Flatten Array using Array.flat in JavaScript

  • Code snippet on How to Check if Object is Empty in JavaScript

    How to Check if Object is Empty in JavaScript

  • hi
  • Home
  • Tidbits
  • Blog
  • Courses
  • Newsletter
  • About
  • Contact

  • What I use
  • Flexbox30
  • Pictorials
  • Web Basics
  • Invite me to speak
  • Become a sponsor
© Copyright 2025. Samantha Ming