CSS CSS Flexbox Layout Building a Layout with Flexbox Creating a Three Column Layout with Flexbox

John Yzaguirre
John Yzaguirre
21,539 Points

flex-basis is a little confusing can someone who understands elaborate?

So I was messing around with flex-basis to see what it is doing and I can't really peg down the behavior. I tried using no-wrap instead on the .row class and it positioned all the columns on one line BUT it made the center column the same width as the side columns. So flex-basis is the way to go for sure. But why? How does it do whatever it is doing? Thanks for any help with this.

3 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 81,356 Points

Flex basis is a property that sets the initial size of a flex item.

You can use it to set the width or height of a flex item, or every flex item and then distributes the rest of the available space.

flex-basis: 100%;

Check out this useful article on flex basis. https://css-tricks.com/almanac/properties/f/flex-basis/

Robert Andrade
Robert Andrade
7,551 Points

I know this is not actually what was asked but I tried using the flex-wrap: nowrap at the second media query and it also worked the same as the flex-basis idea, at least in this specific instance.

Robert Szabo
Robert Szabo
7,987 Points

Well I also tried out what you wrote, but it only partially worked that way. Without setting the flex-basis to 0, you cannot apply the flex-grow: 1.4 value. All 3 columns will be the same size.

Flex basis essentially overrides any previously set width/height on an element once it becomes a flex item.