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.
