When it comes to complex layouts in web design, designers have had evolving opinions on the best methods. Before CSS, the only option was to use HTML tables. Since CSS, we have largely neglected tables for layouts, and have added the float, position and display properties to our roster. As of CSS3, however, another feature called the Flexible Box Layout or Flexbox has been developed that has adaptable options the earlier properties don't.
The goal of flexbox is to dynamically adjust the alignment and dispersal of items inside a specified container. A container assigned this property can dictate the direction, spacing and size of the children elements in a way that would normally require specific margins and dimensions in conjunction with other layout properties. As an example of flexbox's capabilities, the example below shows a container with three divs inside. Using flexbox, the divs have automatically been resized to fit the width of their container evenly without needing to set specific widths on them.
|
<style> .flex-item { <div class="container"> |
|
Item 1
Item 2
Item 3
|
But first thing's first. Before you do anything else when it comes to flexbox, the first step is to always add the display property to the container you will be using. You use the property display:flex to render as a block element, or display:inline-flex to render as an inline element. Once you've done that, you can start applying your other properties to make the magic happen. So over the next few pages, we'll learn about what other properties are available.
