css fun

Sun Jul 13 2025

Looking at flexbox and how to use it to layout a site.

Written by: Cesar

1 min read

css

web

Looking at flexbox and how to use it to layout a site. In the past I took a quick course on flexbox but since I dont’t use it much I forgot all about it. So what is it, its a way of controlling items on a page. You start with a parent element like a list ul and items in that list li. You can then use display:flex; to turn that list into a flex container, then using flex css attributes you can control how those flex items are positioned. You can for example display them horizontally, which is the default layout of flexbox. Here is an example:

<style>
    ul {
        list-style-type: none;
    }

</style>    
<nav>
    <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
    </ul>    
</nav>

to get something like this:

html list

Now to display them horizontally we simply add display:flex; to the ul selector.

<style>
    ul {
        list-style-type: none;
        display:flex;
    }

</style>

Now we get this:

html list