But ‘display: none’ is more efficient, so only use ‘collapse’ if you might dynamically un-collapse it.
Conversation
You can also use the ‘order’ property inside a media query, to change the order of columns based on the screen width. Tricky.
1
1
There is a very complicated attempt to find a reasonable minimum size for each flex item.
If this is your important flex item, set yourself a min-width (if this is a row) or min-height (if this is a column).
1
‘Flex-direction’ on the flex container can be ‘row’ (in the direction of text) or ‘row-reverse’ for backwards.
Or use ‘column’ to go in the direction of blocks (downward, for English) or ‘column-reverse’ for backwards (up).
1
2
By default, a flexbox is a single line. If you want it to be multiple lines as necessary, use ‘flex-wrap: wrap’
(Or ‘wrap-reverse’ but that’s weird)
1
‘Flex-flow’ is just shorthand for direction and wrap.
1
The ‘order’ property lets you put your elements in a logical-for-reading order, and then display them visually in a different order.
The default is zero, so set it to negative to make a flex item sooner, and positive to make it later.
1
The main purpose of a flexbox is to distribute space in the main dimension.
Assuming this one is a row:
‘Width’ matters on the flex container,
But on the flex items ‘width’ is ignored. It’s all about the ‘flex’.
1
‘Flex’ property (on a flex item) is shorthand for three properties.
‘Flex-grow’ is about, when we have extra space, how much do yu get, relative to your siblings?
‘Flex-shrink’ is about, when there’s not enough room, how much do you squish, relative to your siblings?
1
1
‘Flex-basis’ is what you specify instead of ‘width’. It’s how wide (for a row) you want to be.
Wow, that’s confusing.
Or you can set ‘flex-basis’ to ‘auto’ and then it uses ‘width’
... which is the default so maybe it works ok?
2
6
Replying to
My colleague was implementing flexbox in - it almost drove him a little loopy and he had to take a holiday! Came back a few months later and it was much easier. Apparently they’d cleaned up the spec somewhat. Still rather mind bending though, from what I hear! 😬