Flexbox- flex-basis

Hi lovely people!

I have 2 questions.

I am studying the flexbox topic and about the flex-basis. I noticed that we gave pixels as the measurement for the value of this flex-basis property. We have learned that with the responsive design we use % so it adjusts in relation to the container when the browser resized.

  1. How can then pixels be used here with flex-basis?

  2. Also, when it comes to the media query, can we use/ do we have to or can we choose between flexbox and media query to create a responsive design?

Link to the material: https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-making-a-website-responsive/modules/fecp-layout-with-flexbox/lessons/learn-flexbox-l/exercises/flex-basis

Thank you!

1 Like

Hey @zsolt84 .

flex-basis property can be thought of as width of that particular flex item. However, it behaves a little different from the width property we know of.

Width of any HTML element can be specified using width property, right? It can take values in pixels, percentages and other units. However, flex-basis is a little different from our traditional width in the sense that it isn’t absolute. Eg: if we specify a div to have a width of 50px, then no matter what the size of the window would be, the div would still be 50px wide. But! if it was flex item and we specified the flex-basis property then, the flex item would try to achieve the width specified by flex-basis but it isn’t hard coded; meaning that the flex item could be smaller than this width or wider, depending on the space available to it. Furthermore, we can control the distribution of this extra space using properties like flex-grow and flex-shrink.

You can create responsive design by using either of them or both of them together. But, as per my opinion, flexbox shouldn’t be used to layout entire webpages instead if you have a small image gallery or some snippets of text to display then you could potentially use flexbox. Think of it this way, entire webpage is spread horizontally as well as vertically but if you use flexbox, then at any moment in time, you can either specify the flex items to arranged horizontally or vertically but not both ways.
If you do like the flex box approach, try using CSS grids. They’re awesome! And you can use them with media queries to make your webpage responsive. CSS grids offer much finer control since we have control over both the width of the webpage as well as the height of the webpage.