How to Set Up a Simple HTML File to Experiment with Flexbox in Chrome

4 min readFeb 16, 2025

I’m an iOS developer, and I’m not that familiar with HTML and CSS. So I thought it would be fun to set up some code and play around with Flexbox using Chrome’s developer tools.

How hard could it be?

The Guide

I’m going to start off with the most simple (that I can think of) basic HTML file.

We first need to create a file (in a spiffing new folder) with a .html suffix. An appropriate name for this is index.html, and this can be done with nano, vim, Xcode or you favourite text editor.

The file will contain the following HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Playground</title>
    <style>
        .container {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: dodgerblue;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center…

How to Set Up a Simple HTML File to Experiment with Flexbox in Chrome

The Guide

Written by Steven Curtis

No responses yet