Published on

Creating a Responsive Layout Using Flexbox: Displaying Skills in Style

Authors
  • Mehdi Akiki avatar
    Name
    Mehdi Akiki
    Twitter

Flexbox is a powerful CSS layout tool that allows you to create flexible and responsive designs effortlessly. In this guide, we will demonstrate how to build a responsive layout to display various skills (e.g., JavaScript, TypeScript, Golang, etc.) using Flexbox and provide multiple variations for different display needs.

Basic Flexbox Layout

To start, we will create a simple Flexbox container with two columns that adapts as needed.

<div class="flex flex-wrap gap-4">
  <div class="flex-1 bg-blue-200 p-4">JavaScript</div>
  <div class="flex-1 bg-blue-200 p-4">TypeScript</div>
  <div class="flex-1 bg-blue-200 p-4">Golang</div>
  <div class="flex-1 bg-blue-200 p-4">Python</div>
  <div class="flex-1 bg-blue-200 p-4">Rust</div>
  <div class="flex-1 bg-blue-200 p-4">Java</div>
  <div class="flex-1 bg-blue-200 p-4">C++</div>
  <div class="flex-1 bg-blue-200 p-4">Ruby</div>
  <div class="flex-1 bg-blue-200 p-4">PHP</div>
  <div class="flex-1 bg-blue-200 p-4">Swift</div>
  <div class="flex-1 bg-blue-200 p-4">Kotlin</div>
  <div class="flex-1 bg-blue-200 p-4">Dart</div>
</div>

Explanation:

  • flex sets the container to be a flex container.
  • flex-wrap allows items to wrap to the next line when necessary.
  • gap-4 adds space between the items.
  • flex-1 ensures that all items take up an equal amount of space within their container.

Responsive Adjustments

To make this layout responsive, we can use Tailwind's responsive utilities to modify the behavior at different screen sizes:

<div class="flex flex-wrap gap-4">
  <div class="w-full bg-green-200 p-4 md:w-1/2 lg:w-1/3">JavaScript</div>
  <div class="w-full bg-green-200 p-4 md:w-1/2 lg:w-1/3">TypeScript</div>
  <div class="w-full bg-green-200 p-4 md:w-1/2 lg:w-1/3">Golang</div>
  <div class="w-full bg-green-200 p-4 md:w-1/2 lg:w-1/3">Python</div>
  <div class="w-full bg-green-200 p-4 md:w-1/2 lg:w-1/3">Rust</div>
  <div class="w-full bg-green-200 p-4 md:w-1/2 lg:w-1/3">Java</div>
  <div class="w-full bg-green-200 p-4 md:w-1/2 lg:w-1/3">C++</div>
  <div class="w-full bg-green-200 p-4 md:w-1/2 lg:w-1/3">Ruby</div>
  <div class="w-full bg-green-200 p-4 md:w-1/2 lg:w-1/3">PHP</div>
  <div class="w-full bg-green-200 p-4 md:w-1/2 lg:w-1/3">Swift</div>
  <div class="w-full bg-green-200 p-4 md:w-1/2 lg:w-1/3">Kotlin</div>
  <div class="w-full bg-green-200 p-4 md:w-1/2 lg:w-1/3">Dart</div>
</div>

Explanation:

  • w-full makes each item take up the full width of the container on smaller screens.
  • md:w-1/2 changes the width to half the container on medium screens (768px and above).
  • lg:w-1/3 adjusts the width to one-third of the container on large screens (1024px and above).

Centering and Aligning Items

To center items and ensure they align in a visually appealing way, you can add more Flexbox properties:

<div class="flex flex-wrap items-center justify-center gap-4">
  <div class="w-full bg-yellow-200 p-4 md:w-1/2 lg:w-1/4">JavaScript</div>
  <div class="w-full bg-yellow-200 p-4 md:w-1/2 lg:w-1/4">TypeScript</div>
  <div class="w-full bg-yellow-200 p-4 md:w-1/2 lg:w-1/4">Golang</div>
  <div class="w-full bg-yellow-200 p-4 md:w-1/2 lg:w-1/4">Python</div>
  <div class="w-full bg-yellow-200 p-4 md:w-1/2 lg:w-1/4">Rust</div>
  <div class="w-full bg-yellow-200 p-4 md:w-1/2 lg:w-1/4">Java</div>
  <div class="w-full bg-yellow-200 p-4 md:w-1/2 lg:w-1/4">C++</div>
  <div class="w-full bg-yellow-200 p-4 md:w-1/2 lg:w-1/4">Ruby</div>
</div>

Explanation:

  • justify-center centers the items horizontally.
  • items-center centers the items vertically within their container.

Staggered Flex Layout

To create a staggered layout, you can use a combination of flex properties:

<div class="flex flex-wrap gap-4">
  <div class="flex-[2_2_0%] bg-red-200 p-4">JavaScript</div>
  <div class="flex-[1_1_0%] bg-red-200 p-4">TypeScript</div>
  <div class="flex-[1_1_0%] bg-red-200 p-4">Golang</div>
  <div class="flex-[2_2_0%] bg-red-200 p-4">Python</div>
  <div class="flex-[1_1_0%] bg-red-200 p-4">Rust</div>
  <div class="flex-[1_1_0%] bg-red-200 p-4">Java</div>
</div>

Explanation:

  • flex-[value] allows custom flex growth, shrink, and basis values for each item to create unique layouts.

Conclusion

  • Flexbox offers a straightforward way to create flexible, responsive layouts.
  • Tailwind's utility classes make it easy to define responsive behaviors.
  • Combining flex properties with responsive prefixes allows for adaptive grid structures.
  • Flexbox layouts can be customized to fit various content types and display needs.
  • Flexbox is ideal for simple, multi-column layouts that scale elegantly across devices.

By applying these principles, you can showcase content like skills in a structured, responsive manner that adapts seamlessly to different screen sizes.

I build and scale reliable production systems. Open to full-time and freelance work with U.S.-based teams that value ownership and execution.

Got something in mind?

Book a Discovery Call