Initially aligning block level elements besides one another to achieve multiple column layouts was a bit tedious,but then Float property was introduced so as to achieve multiple column layouts. Float property was widely used by coders and still is being used.
But there are some drawbacks in using float, which makes a developer rethink in using it in a layout where there are multiple columns and proper alignment is a necessity.
Problems with using Floats
- 1. A child element particularly an image when placed inside a floated parent item, tends to overflow outside the parent element thus pushing down the other floated element beside the parent item.
- 2. A float property when used needs to be cleared.
- 3. Items cannot be centered vertically.
I have just listed a few ones but there are many, and so as to overcome this shortcomings Flexbox was introduced.
Advantages of using Flexbox
- 1. Flexbox helps align items and distribute it equally on a vertical and horizontal axis in a container.
- 2. It also ensures that the layout won’t break at different screen sizes and on different devices.
- 3. It can be really helpful with dynamic content when the size of the items is unknown.
- 4. Flexbox contains a set of properties that can be used to make the layout flexible.
- 5. One can align the items both vertically and horizontally center.
- 6. Flexbox properties when used, the height and width of the items gets adjusted by default to fill the available space or shrinked to prevent overflow
USAGE:
Starting with the implementation firstly set the display property to the parent container as below.
| 123 | .flex-container { display: flex;} |
Or can use it as an inline element:
| 123 | .flex-container { display: inline-flex;} |
More Flexbox Container Properties:
1. flex-direction: This property sets the direction of the parent container. With this the items inside the parent container gets aligned vertically or horizontally.
| 123 | .flex-container { flex-direction: row | row-reverse | column | column-reverse;} |
2. flex-wrap: This property helps to set items in single or multiple lines.
| 123 | .flex-container { flex-wrap: nowrap | wrap | wrap-reverse;} |
3. flex-flow : A shorthand property for setting the flex-direction and flex-wrap properties together.
| 123 | .flex-container { flex-flow: <flex-direction> | <flex-wrap>;} |
4. justify-content : This property helps to distribute the flex items accordingly.
| 123 | .flex-container { justify-content: flex-start | flex-end | center | space-between | space-around;} |
5. align-items : It is similar to justify-content but helps in aligning items in perpendicular direction with the flex container.
| 123 | .flex-container { align-items: flex-start | stretch | flex-end | center | baseline;} |
6. align-content : This property aligns flex items accordingly filling out the extra space within the parent container.
| 123 | .flex-container { align-content: stretch | flex-start | flex-end | center | space-between | space-around;} |
I too use Flexbox, its simple to implement and saves a loads, no need to use frameworks or create any responsive grids.
Thanks