.row{display:flex;flex-wrap:wrap;/* only needed for responsive */width:100%;}.column{flex-basis:100%;}
Also note that flex-wrap: wrap on the .row is only needed for responsive layouts - if you don't have any responsive rules, you don't need this, since nowrap is the default, and columns will divide the space and never wrap.
The default CSS rules are set for the "large" layout; the "exception" is for small screens
That "flex: 1" actually means flex-grow : 1; flex-shrink : 1; flex-basis : 0; (courtesy of stackoverflow.com/questions/373862...). I set those values as defaults for every columns and...
Changed the CSS so that every column has the class 'column', but adding s2 or s3 makes them wider
I am not 100% sure when we would ever want to use flex-wrap: wrap;. However, I left it there.
I basically spelt every out in terms of CSS rules, and "reversed it out" to make it easier to understand.
Would you consider updating the article with this updated CSS? If not, I will be happy to write an article about it (obviously linking back to you!)
Ah I thought you were the author -- sorry!
I updated my comment with the correct link. Well spotted. I nearly had a heart attack, thinking that I had lost it!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I only have one simple question.
Why do you have:
display: flex;
flex-direction: column;
in .column?
Isn't this only if the column itself contains flex elements?
That's what I was wondering.
I'm not an expert, but from this article, I understand that some flex properties are for flex parents, and some are for flex children.
So in this case, no need for any flex parent properties on the flex children.
Here's the last example on the page with extra properties commented-out - works just the same:
codepen.io/mindplay-dk/pen/oNXmwej
So all we need is this:
Also note that
flex-wrap: wrapon the.rowis only needed for responsive layouts - if you don't have any responsive rules, you don't need this, sincenowrapis the default, and columns will divide the space and never wrap.I am no expert either, but I have worked on the CSS a lot... here is the result:
codepen.io/mercmobily/pen/KKddYNJ
Basically:
I am not 100% sure when we would ever want to use flex-wrap: wrap;. However, I left it there.
I basically spelt every out in terms of CSS rules, and "reversed it out" to make it easier to understand.
Would you consider updating the article with this updated CSS? If not, I will be happy to write an article about it (obviously linking back to you!)
I didn't write the article, just a comment 🙂
Wrong link? the link you posted is just a link to the codepen I posted? 😉
I didn't write the article, I just wrote a comment 🙂
(Also, wrong link? The link you posted is just a link to the codepen I posted.)
Ah I thought you were the author -- sorry!
I updated my comment with the correct link. Well spotted. I nearly had a heart attack, thinking that I had lost it!