Ever since I learned of Bootstrap, I have incorporated the framework into all my front-end work. I enjoy being able to easily configure fully-responsive layouts. So when I heard about Flexbox (go figure, seeing as all major layout frameworks [ahem, Bootstrap] utilize Flexbox), I wasn't too excited to try it out.
That was until I decided to redesign my portfolio website. I specifically wanted to display those logos that correspond to my skills/tools as a grid. My knee-jerk go-to was Bootstrap of course, but it was a little challenging to configure. My logo descriptions kept running into each other and my grid appeared too smushed on different mobile/tablet screens. But I eventually got it to work. My HTML/CSS code and a video of the result appear below:
<!-- HTML --> <section class="skills" id="skills"> <h1 style="margin: 40px 0px;">Skills & Tools</h1> <div class="container"> <div class="row"> <div class="col-12 col-sm-6 col-md-4 skills-list"> <span><img src="img/htmlcss.png" /><br /> HTML/CSS</span> </div> <div class="col-12 col-sm-6 col-md-4 skills-list"> <span><img src="img/js.png" /><br /> JavaScript</span> </div> <!-- some more similar code --> <div class="col-12 col-sm-6 col-md-4 skills-list"> <span><img src="img/trello.png" /><br /> Trello</span> </div> <div class="col-12 col-sm-6 col-md-4 skills-list"> <span><img src="img/slack.png" /><br /> Slack</span> </div> </div> </div> </section> /* CSS */ .skills-list { line-height: 75px; font-size: 20px; text-align: center; }
Now, I recently remembered Flexbox and wondered if it would make my grid work just as well as, or better than, Bootstrap. I was pleasantly surprised to find that I only needed to define the flexbox container and my individual grid elements. The flex-wrap property resulted in a much-smoother transition of my grid arrangement as I manipulated my screen's size (see code and video below).
<section class="skills" id="skills"> <h1 style="margin: 40px 0px;">Skills & Tools</h1> <div class="skills-container"> <div class="skills-list"> <span><img src="img/htmlcss.png" /><br /> HTML/CSS</span> </div> <div class="skills-list"> <span><img src="img/js.png" /><br /> JavaScript</span> </div> <!-- some more similar code --> <div class="skills-list"> <span><img src="img/redhat.png" /><br /> RedHat/Centos</span> </div> <div class="skills-list"> <span><img src="img/wordpress.png" /><br /> Wordpress</span> </div> </div> </section> .skills-list { line-height: 75px; font-size: 20px; text-align: center; width: 175px; } .skills-container { display: flex; align-items: center; flex-wrap: wrap; }
CSS Flexbox excites me now 😆🤩 It feels quite intuitive, and I'm looking forward to configuring a lot more of my future layouts with it.
How have you used Flexbox? Do you prefer it over any other layout frameworks? Why or why not?
(thanks for reading! 👋🏾)
Top comments (3)
Nice!
What I don't like with Bootstrap-style grid layout is that it forces you to think your layout into an arbitrary 12-columns grid. In addition, every time you learn a new CSS framework, you need to learn their grid system, whereas Flexbox & CSS Grid are just waiting in your browser to be used.
IMO, with Flexbox & CSS Grid, we won't need third-party grid systems (all the more true if a project doesn't need to support Internet Explorer).
BTW, here's a great course to get started with CSS Grid: cssgrid.io
Wes Bos course are always a must.
By the way there is also one (free) for flexbox : flexbox.io/
Hi Jerome! Thanks for the resource 🤗