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.
- Create a parent container, the
flex-container
. - Once the parent container is created, items inside of the parent container will become child elements, the
flex-item
's. - 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
toflex
, 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 aninline
element.
flex-direction
can change the direction from horizontal or vertical. It has four values you can use:
-
row
is the default value flex-direction is set to. row-reverse
-
column
changes the direction vertically. 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:
- grow -> This will determine how elements will expand to fill in extra space (if any) in the flex-container.
- shrink -> This will determine how elements shrink when there isn't enough space in the flex-container.
- 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.....
Top comments (0)