The Australian Government coat of Arms

Communities of practice

Communities of practice

Flexbox for layout/components

I’ve started using the Design System for prototyping, and I really love the work put in to it! I have found some areas a bit limiting though and I generally have to use some Bootstrap framework components in conjunction with the Design System.

Perhaps I’m not looking in the right area…but I couldn’t seem to find any “flexbox” options in the documentation. I love the behaviours of flexbox, and it would be awesome to see that supported (for modern browsers) in the Design System. It would also be great to have global padding and margin classes that could be added to elements too! :grimacing:


Hey Jess,
Welcome to the forums!

Currently we are in the process of upgrading our grid to use the bootstrap 4 grid.

We will not be shifting to a flex box grid anytime soon unfortunately. This is because of the lack of support for browsers below IE10. And I think it could be potentially confusing to have two grid systems.

I could see global paddings/margin being useful for developers. Anybody else have any thoughts on this?

1 Like

Flex box is magic : )

Hey Jess,

I just came across this:

Looks like it could work if we wanted to implement a flexbox grid in the future. It also works with postcss, so we could get it to automatically look through our css files and automate everything.

Hmmm…I’ll be testing it out :slight_smile:

Hi Sukhraj, as you’re probably aware, usage of IE9 and below, is hovering close to zero. W3 schools ( has “older IE”, which includes IE10, at .2%. StatCounter ( has all IE at 1.97%, of which at least 80% would be IE 10 & 11. In that light, doesn’t the statement “We will not be shifting to a flex box grid anytime soon” seem a little hard to defend, given the obvious benefits of Flexbox over floats and float-clearing. Keep in mind, that users of IE9 and below would not suffer unduly, since polyfills are available. We used one at my previous employer, which worked successfully.