Flex Demo

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.