CSS: Float & FlexBox
Tags: css, design, html
Published: 2020-08-25 22:43:47

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](https://dev.to/ethanmgustafson/css-float-flexbox-14fg#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.

```html
<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>
```

```css
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:

{% codepen https://codepen.io/GoodGuyGuf/pen/wvGJdev %}

# **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` to`inline-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.....

{% codepen https://codepen.io/GoodGuyGuf/pen/yLOMbXV %}