Jan 17, 2017 0:33:48 GMT -5
i.imgur.com/61RnpWq.gif (warning, big gif)
Been learning flexbox. Here is what I came up with today... well yesterday since it's past midnight now.
This is probably the third or fourth re-code. Not real happy with the board design anymore. It doesn't really work well with odd number of boards. It just stretches is across since I have flex-grow set to one.
Jan 17, 2017 17:49:54 GMT -5
Why not use media queries to set a max-width on the boards? You can still retain flex-grow
Jan 17, 2017 19:16:01 GMT -5
There are a few media queries. I believe they are set to 800px. They modify the width with flex. Off the top of my head I believe they are set to flex: 1 0 100%;
The cat header has the text-align change to center.
I am not really happy with the margin/padding with flexbox. I found a work around with a previous attempt but the code was really messy and way to complicated. This one I made the initial widths to something like flex: 1 0 40%; so that I could add the margin and padding I wanted.
Jan 20, 2017 22:43:51 GMT -5
box-sizing: border-box makes sure that containers won't change size with padding (not margins sadly though).
Jan 21, 2017 10:36:13 GMT -5
@trinityblair
Thanks, I'll keep that in mind when I recode it again.