CSS: Float & FlexBox

This blog covers the basics of using Float and Flexbox with two CodePen examples to guide you along. Jump to the cool FlexBox Music CodePen instead?

Float

Floats were used before Flexbox and Grid to create entire layouts. It isn't used as much anymore, but you may encounter it in legacy code.

The float property essentially "floats" an element to the left or right of its container.

It also removes that element from the normal flow of the document. For example, if you float an image that has a caption, its caption will end up filling up space around the image. The image is removed from the normal flow of the document.

You can clear a float by using the clear property on the element you wish the document to return to its normal flow from. If you added the clear property for the image caption, the caption would adjust itself underneath the image and that is where the document would return to its original flow.

<figure>
    <img src="https://cdn.britannica.com/s:800x450,c:crop/80/195880-138-31821A6D/kinds-eruptions.jpg" alt="wallpaper" width="250px" height="250px">
    <figcaption>
        Mauna Loa, the Earth's largest active volcano, 
        towers nearly 3000 m (9800 ft) above Kīlauea 
        Volcano (caldera in left center) Hualālai 
        volcano is in upper right, Hawai'i.
    </figcaption>
</figure>

img {
    float: left;
}

figcaption{
    clear: both; /*options for left, right or both*/
}

In order to show you the power of float, here is a Codepen I created that demonstrates how you could layout images with captions:

FlexBox

Flexbox is a layout module that was introduced in July 23rd of 2009. It is supported in all web browsers.

Instead of using a float to create layouts by floating elements to the left or the right, flexbox allows you to create layouts by aligning items to a single axis. The axis can be horizontal or vertical. It is best used for distributing space for items in the same axis.

1. Create a parent container, the flex-container.
2. Once the parent container is created, items inside of the parent container will become child elements, the flex-item's.
3. Flex items are arranged in rows by default, but you can change this to arrange the items into columns.

The display property is used to set one of two values: flex & inline-flex.

• If you set display to flex, all children inside of the container become a flex item. They will be automatically arranged into a row and each element will be the same width as their content. The flex container spans its own width, and each child has to fit in the container's width.
• If you set display toinline-flex, it makes the flex container behave like an inline element.

flex-direction can change the direction from horizontal or vertical. It has four values you can use:

1. row is the default value flex-direction is set to.
2. row-reverse
3. column changes the direction vertically.
4. column-reverse

For accessibility reasons, you shouldn't reverse rows or columns just to re-order content. The HTML is not changed, the visual direction of content has changed.

To adjust the sizing of flex items, you will use the three values that come along to the flex property:

1. grow -> This will determine how elements will expand to fill in extra space (if any) in the flex-container.
2. shrink -> This will determine how elements shrink when there isn't enough space in the flex-container.
3. basis -> will set the initial size of the flex-items.

Use flex: grow shrink basis in exactly that order. You use this on flex items only.

FlexBox Music CodePen

Here is my CodePen detailing how you could use Flexbox to create a navigation bar as well as other elements that are providing you with some music as you learn. :)

Plus a few other miscellaneous items.....