πŸ€‘ Join the Treehouse affiliate program and earn 25% recurring commission!

New No-Code Track! πŸš€start learning today!

🌟 Dreaming of a bright future? πŸŽ“ Ask about the Treehouse Scholarship program! πŸš€

✨ Earn college credits in Cybersecurity, JS, HTML, CSS and Python

  • Treehouse Logo
  • Plans
    Chevron
    • For Individuals
    • For Businesses
    • For Schools
    • For Libraries
    • For Military
  • Library
    Chevron
    • All Courses
    • Tracks
    • College Credit
  • Techdegree
    Chevron
    • Overview
    • Front End Development
    • Full Stack JavaScript
    • Data Analysis
    • UX Design
    • Python
  • Community
    Chevron
    • Code Adventures
    • Discord
    • Forum
    • Success Stories
    • Treehouse Links
    • 100 Days of Code
  • Resources
    Chevron
    • Career Toolbox
    • CodeForward
    • Free Treehouse Near Me
    • Jobs
    • Blog
    • Support
    • About
  • For Individuals For Businesses For Schools For Libraries For Military
  • All Courses Tracks College Credit
  • Overview Front End Web Development Full Stack JavaScript Python Development Data Analysis UX Design
  • Code Adventures Discord Forum Success Stories Treehouse Links 100 Days of Code
  • Career Toolbox CodeForward Free Treehouse Near Me Jobs Blog Support About
  • Sign In
  • Free Trial
Instagram Twitter Facebook YouTube LinkedIn
    • Newest
      • Newest
      • Active
      • Unanswered
      • Featured
    • All Topics
      • All Topics
      • β€’ General Discussion
      • β€’ AI
      • β€’ Android
      • β€’ APIs
      • β€’ Coding for Kids
      • β€’ College Credit
      • β€’ Computer Science
      • β€’ CSS
      • β€’ Data Analysis
      • β€’ Databases
      • β€’ Design
      • β€’ Development Tools
      • β€’ Digital Literacy
      • β€’ Game Development
      • β€’ Go Language
      • β€’ HTML
      • β€’ Java
      • β€’ JavaScript
      • β€’ Learning Resources
      • β€’ Machine Learning
      • β€’ No-Code
      • β€’ PHP
      • β€’ Professional Growth
      • β€’ Python
      • β€’ Quality Assurance
      • β€’ React
      • β€’ Ruby
      • β€’ Security
      • β€’ Swift
    • Showing results for:
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex
    • Close
  • Barcode George
    Barcode George
    595 Points

    Item in the middle above the text

    Posted on Jul 1, 2023 by Barcode George
    Barcode George
    595 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    1 Answer

  • Frank Book
    Frank Book
    308 Points

    flex property values

    Posted on Jun 24, 2023 by Frank Book
    Frank Book
    308 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    1 Answer

  • Peter Huang
    Peter Huang
    5,427 Points

    Dont understand flex-basis.

    Posted on Nov 13, 2022 by Peter Huang
    Peter Huang
    5,427 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    1 Answer

  • ja5on
    ja5on
    10,338 Points

    is flex-basis in theory just a width property?

    Posted on May 10, 2021 by ja5on
    ja5on
    10,338 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    1 Answer

  • ja5on
    ja5on
    10,338 Points

    navigation, heading and flexbox

    Posted on May 8, 2021 by ja5on
    ja5on
    10,338 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    1 Answer

  • ja5on
    ja5on
    10,338 Points

    websites and flexbox

    Posted on May 8, 2021 by ja5on
    ja5on
    10,338 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    1 Answer

  • xajx
    xajx
    6,553 Points

    flex shorthand confusion

    Posted on Nov 29, 2020 by xajx
    xajx
    6,553 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    1 Answer

  • Vasilis Moutzouridis
    Vasilis Moutzouridis
    4,450 Points

    flex-basis: 0; | items break to new lines.

    Posted on Sep 28, 2019 by Vasilis Moutzouridis
    Vasilis Moutzouridis
    4,450 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    2 Answers

  • Victor Mercier
    Victor Mercier
    14,667 Points

    Flex grow and flex basis

    Posted on Jul 6, 2019 by Victor Mercier
    Victor Mercier
    14,667 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    1 Answer

  • Seokhyun Wie
    seal-mask
    .a{fill-rule:evenodd;}techdegree seal-36
    Seokhyun Wie
    Full Stack JavaScript Techdegree Graduate 21,606 Points

    Flex-basis doesn't work properly on Google Chrome

    Posted on Jun 29, 2019 by Seokhyun Wie
    .a{fill-rule:evenodd;}techdegree seal-36
    Seokhyun Wie
    Full Stack JavaScript Techdegree Graduate 21,606 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    2 Answers

  • Matthew McKenzie
    Matthew McKenzie
    4,450 Points

    Dual Column Flex Box

    Posted on Jun 19, 2019 by Matthew McKenzie
    Matthew McKenzie
    4,450 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    1 Answer

  • guram dgebuadze
    seal-mask
    .a{fill-rule:evenodd;}techdegree
    guram dgebuadze
    Front End Web Development Techdegree Student 4,122 Points

    Flex-basis

    Posted on Feb 15, 2019 by guram dgebuadze
    .a{fill-rule:evenodd;}techdegree
    guram dgebuadze
    Front End Web Development Techdegree Student 4,122 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    2 Answers

  • Michael Pashkov
    Michael Pashkov
    22,024 Points

    Can we do this as a variant? flex: 2 200px;

    Posted on Oct 14, 2018 by Michael Pashkov
    Michael Pashkov
    22,024 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    1 Answer

  • guram dgebuadze
    seal-mask
    .a{fill-rule:evenodd;}techdegree
    guram dgebuadze
    Front End Web Development Techdegree Student 4,122 Points

    flex-basiis

    Posted on Sep 16, 2018 by guram dgebuadze
    .a{fill-rule:evenodd;}techdegree
    guram dgebuadze
    Front End Web Development Techdegree Student 4,122 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    3 Answers

  • xin song
    xin song
    1,929 Points

    Flex-basis: 0 still break the line when narrowing the browser.

    Posted on Sep 2, 2018 by xin song
    xin song
    1,929 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    1 Answer

  • yoav green
    yoav green
    8,611 Points

    columns are still distributing with flex

    Posted on Jul 12, 2018 by yoav green
    yoav green
    8,611 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    1 Answer

  • SeHyun Choi
    SeHyun Choi
    3,441 Points

    Some of my flex items are not working properly

    Posted on Jul 5, 2018 by SeHyun Choi
    SeHyun Choi
    3,441 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    1 Answer

  • GoldSpec Digital
    GoldSpec Digital
    4,185 Points

    Flexbox basis...

    Posted on Jun 7, 2018 by GoldSpec Digital
    GoldSpec Digital
    4,185 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    1 Answer

  • Lisa Weil
    Lisa Weil
    4,919 Points

    Found a helpful cheatsheet online to help understand Flexbox better

    Posted on May 1, 2018 by Lisa Weil
    Lisa Weil
    4,919 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    2 Answers

  • Jared Cannon
    Jared Cannon
    3,838 Points

    Flex property doesn't behave like shown in video

    Posted on Nov 21, 2017 by Jared Cannon
    Jared Cannon
    3,838 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    2 Answers

  • Kristian Woods
    Kristian Woods
    23,414 Points

    Understanding flex-basis and flex-grow

    Posted on Aug 15, 2017 by Kristian Woods
    Kristian Woods
    23,414 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    0 Answers

  • Justin Houghton
    Justin Houghton
    4,560 Points

    Overriding flex-grow values

    Posted on Jul 29, 2017 by Justin Houghton
    Justin Houghton
    4,560 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    1 Answer

  • Ryan Schmelter
    Ryan Schmelter
    9,710 Points

    Does flex basis value apply to the container or each item?

    Posted on Jul 14, 2017 by Ryan Schmelter
    Ryan Schmelter
    9,710 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    1 Answer

  • Malcolm Stretten
    Malcolm Stretten
    3,814 Points

    My flex containers DO still re-align themselves into a different format

    Posted on Aug 10, 2016 by Malcolm Stretten
    Malcolm Stretten
    3,814 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    9 Answers

  • James Barrett
    James Barrett
    13,253 Points

    Really struggling to understand what flex-basis is actually doing

    Posted on Jul 20, 2016 by James Barrett
    James Barrett
    13,253 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    2 Answers

  • Vladimir KlindiΔ‡
    Vladimir Klindić
    19,262 Points

    The flex shorthand sets the flex-basis value to zero?

    Posted on May 18, 2016 by Vladimir Klindić
    Vladimir Klindić
    19,262 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    2 Answers

  • Quoc Nguyen
    Quoc Nguyen
    3,957 Points

    Differences between flex-grow: 1; and flex: 1;

    Posted on Dec 14, 2015 by Quoc Nguyen
    Quoc Nguyen
    3,957 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    2 Answers

  • Ivan Saveliev
    Ivan Saveliev
    9,153 Points

    Why No flex-basis or "0" flex-basis still break the line when narrowing the browser?

    Posted on Dec 12, 2015 by Ivan Saveliev
    Ivan Saveliev
    9,153 Points
    • CSS
    • CSS Flexbox Layout
    • Flexbox Properties
    • Smarter Layouts with flex-basis and flex

    7 Answers

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

    Treehouse

  • About
  • Blog
  • Careers
  • Community
  • Stories
  • Shop
  • Contact
  • Gift Card

See Full Catalogue

Techdegree

  • Front End Web Development
  • Full Stack JavaScript
  • Python Development
  • Data Analysis
  • UX Design

Tracks

  • Learn to Code for Beginners
  • Beginning Python
  • Beginning SQL
  • Beginning Java
  • ...see more

Courses

  • JavaScript Basics
  • Intro to HTML & CSS
  • Python Basics
  • CSS Layout
  • ...see more

Explore

  • Plans
  • Affiliates
  • Perks
  • Free Treehouse Near Me
  • Treehouse for Libraries
  • Treehouse for Businesses
  • Twitter
  • YouTube
  • Facebook
  • LinkedIn
  • Instagram
Terms & Conditions | Privacy

Β© 2025 Treehouse Island, Inc.