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 🤗