Thoughts and advice on Flexbox design

Hi, because of changes to our company I have recently become the web developer again. I enjoy web development, however, when I take 3-5 year breaks, I get rusty. Plus, things change, and new things that I am not up to speed with emerge. This time I have discovered that it a good idea to use Flexbox for responsive design. It looks like some great stuff. However, I am curious to know if I should really let this be what I rely on for a responsive site. Are there cons to working with Flexbox layouts? Thanks

Flexbox is another tool in the css toolbox, it has not become the only tool though. It is very good and vesitile, I like it.
But you don’t have to use it for absoluley everthing. I say that becuase some people seem the think that because it’s there, they must use it.
There are an array of layout tool in css now, it’s just a case of picking the one that is best suited to the particular job in hand. And you can of course use a number of different layout tool for different parts of the page, you don’t have to stick to just one.
What I’m saying is, flexbox is an excellent tool and encourage you to experiment with it, but it does not make the other tools obsolete for what they do well.

Also check out css grid.

3 Likes

My takeaway from this is that Flexbox could be part of bunch of good ideas to build a responsive webpage. I guess it could be combined with other good techniques. This helps a lot, thanks.

HTML is quite good at making responsive sites without using CSS as long as you appreciate the difference between the HTML elements. Some elements default to the full width of the page and other elements default to their inline block width. The latter elements naturally wrap until they encounter a 100% width element.

Adding the CSS outline selector to all HTML elements is visually useful in itemizing individual elements and their effect on the rendered page. (CSS borders add another block whereas outline adds a visual border that overlays the element).

Try to remove all hard-coded width selectors and notice how the block elements naturally wrap when the page width is adjusted.

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.