The Future of CSS3 Layout: Flexbox
Has anyone heard of flexbox?
Yep, flexbox is indeed a powerful css3 module for managing layouts. For those of you who have never heard of it, don’t panic, this is your chance to catch up what is flexbox is.
Flexible Layout (Flexbox) is a css3 module (not properties, because it consists of a set of properties) which aims to provide flexible layout, aligning, and spacing settings between items in a container. We can position an item (it can be anything; div, span, section, ul, li, a, etc) without even knowing the dimensions of the item (that’s why it’s called flex, because it’s flexible).
What do you use Flexbox for?
The main idea behind the creation of flexbox is to give containers the ability to adjust the length, width, and order of the items in it with the aim of maximizing the available space. This is important for developers to know because today’s requirements include many dimensions in various devices and resolutions.
Ok, now you know & have a reason why you should use flexbox in your coding. Get to the point. Here we go.
Flexbox is applied to a container which is then called Flex Container. In one container there are items whose number can be more than one. These items are called Flex Items. It should be noted, flexbox plays a parent and child relationship. The element that becomes a flex item must be a direct child of a flex container element.
Screen Shot 2013-08-27 at 5.00.54 PM
Flexbox has its own coordinate system, namely
Main Axis : horizontal line that runs from left to right (by default)
Cross Axis: vertical line that stretches from top to bottom (by default)
Flex items stand on a line called the Flex Line. Flex line can be horizontal or vertical depending on the determination in the flex direction properties. Basically, the items made will be along the flex line from main-start to main-finish or from cross-start to cross-finish.
At the beginning we were told that flexbox is a set of properties, not just one. To set flex items provided various properties. These are some.
Display: flex | inline-flex | flexbox (parent element)
This property is the most important prop. This is aimed at the container element. The goal is to specify that the target element is a flex container. Without declaring this, all other flexbox props are meaningless.
display : flex | inline-flex | other values
– float, clear, vertical-align have no effect samsek on flex items.
– css fields, as usual, don’t apply in flex containers
Flex direction (parent element)
Determines the direction of the flex container’s coordinates whether it propagates horizontally (row) or vertically (column). For more details can be seen here. The existing values include row, column, row-reverse, and column-reverse.
flex-direction: row | row-reverse | column | column-reverse
Flex wrap (parent element)
Specifies the number of lines in the flex container, whether single line or multi line. In addition, it determines the direction and position of the cross axis to set where the new item will be placed. Existing values include wrap, nowrap, wrap-reverse
flex-wrap: nowrap | wrap | wrap-reverse
Flex flow (parent element)
This is a shorthand form of the above 2 properties (direction & wrap). Shorthand is very common for developers because of the effectiveness & simplicity of DOM.
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
Justify content (parent element)
Specifies the arrangement of flex items along the main axis. This prop adjusts the position of the items and makes use of the available empty space. Available values include flex-start, center, flex-end, space-between, and space-around.
justify-content: flex-start | flex-end | center | space-between | space-around
Screen Shot 2013-08-27 at 5.01.04 PM
Align items (parent element)
Determines the position of the flex item along the cross axis line. This prop is similar in function to justify content, only the direction is different, namely perpendicular or axis. Available values include flex-start, center, flex-end, space-between, and space-around.
align-items: flex-start | flex-end | center | baseline | stretch
Align items flexbox
Align content (parent element)
Adjust the position of the flex line. This property will only work if the container has multi line items. The position of the flex line can be adjusted whether it is docked at the beginning, at the end, in the middle or otherwise. Values include flex-start, center, flex-end, space-between, space-around, and stretch.
align-content: flex-start | flex-end | center | space-between | space-around | stretch
To understand more, let’s get dirty on our code. You can continue to the flexbox tutorial section, here.