Try resizing your browser to see the columns get smaller, the fonts too (using the vw
measure) until the browser
width gets to 1200px at which point the fonts stop getting smaller. Keep sizing down and because the item boxes have
a min-width of 195px they'll change from three on a line down to two and finally down to one item box on each line.
You can view source to see the css, which I've embedded in the page so it's easier for you to read. That's right mouse click => view page source
Basically to implement Flex I have put a parent element around all of these boxes and that parent element
I have defined in the css as display: flex
. That's really all you need, though if you look at
the css you'll find I've added flex-wrap: wrap; justify-content: center
. You can look those up
at https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Use a right mouse click and open in new window or tab though so you don't lose you're place here.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam aliquid architecto cupiditate, deserunt dolore eaque eveniet explicabo fugiat in laudantium magnam magni maiores, numquam obcaecati quod rem similique. Nobis.
Notice that there is less content in this box but because the css says: align-self: stretch
each box on this line
is the same height.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae impedit itaque natus nesciunt nulla possimus quis ratione. Alias deserunt dicta dolor explicabo id itaque laborum minus praesentium rem sed.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam aliquid architecto cupiditate, deserunt dolore eaque eveniet explicabo fugiat in laudantium magnam magni maiores, numquam obcaecati quod rem similique. Nobis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae impedit itaque natus nesciunt nulla possimus quis ratione. Alias deserunt dicta dolor explicabo id itaque laborum minus praesentium rem sed.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam aliquid architecto cupiditate, deserunt dolore eaque eveniet explicabo fugiat in laudantium magnam magni maiores, numquam obcaecati quod rem similique. Nobis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut beatae impedit itaque natus nesciunt nulla possimus quis ratione. Alias deserunt dicta dolor explicabo id itaque laborum minus praesentium rem sed.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam aliquid architecto cupiditate, deserunt dolore eaque eveniet explicabo fugiat in laudantium magnam magni maiores, numquam obcaecati quod rem similique. Nobis.