This is not a tutorial as such, just a bunch of notes for myself as I start to utilize flexbox more in my layouts, there is quite a lot of great guides with working layout interactive examples but I am not going that far here – so on with the properties…
Flexbox is best used with a container or parent element that has child elements or items. Flexbox uses mostly containing properties and values to control the inner items but also has child items to fine tune the layout.
Flexbox Container Properties.
Display
display:flex
Start off with the easy one – each container needs to have a flex value for the display property.
The next property is flex-direction which determines whether the child elements are arranged in a row (default) or stacked in a column. This arrangement or flow of content is also known as the main axis, whilst the opposite direction is known as the cross axis.
flex-wrap property determines if the child elements will wrap in the container or not wrap – elements that dont wrap may either shrink in width or disappear from the viewport.
Shorthand
flex-flow: row wrap
flex-direction and flex-wrap can be combined into the shorthand flex-flow property, just add the values together with a space.
Spacing
justify-content: flex-start* justify-content: flex-end
justify-content: center justify-content: space-around justify-content: space-between
This property positions the child items in the container, placing them at the start, at the end, the centre, centered with equal space or spaced from edge to edge with equal space.
Alignment of Items
So far the properties have dealt with the main axis, there are also a couple that deal with positioning in the cross axis – things get a little more complex here.
align-items: flex-start* align-items: flex-end
align-items: center align-items: baseline align-items: stretch
So here align-items will position the child elements in a vertical position if the container is set to a row and to a horizontal position if the container is set to a column. Sticking with the row positioning; flex-start will position the elements at the head of the row, flex-end will place them at the foot, center in the middle, baseline will line up the items to the text baseline and stretch will display the items from head to foot in the container by stretching them.
Depending on the value of align-content (next up), align-items will not always give expected results, align-items works best when the child elements are in one row or the row is set to nowrap.
One great technique here is vertically centering content – by setting justify-content and align-items to center the content is vertically centered.
Alignment of Content
align-content works best when there are items that span multiple rows and when the row is set to wrap, so a bit different to align-items as just previously described.
So align-content if in a row will position the child elements at the head, foot or center, or space them between the edges or from the edges and also stretch them to fit the container.
Flexbox Child Item Properties.
Flex Grow | Flex Shrink | Flex Basis
The properties flex-grow, flex-shrink and flex-basis come into play when a child element has no set width, kind of like width:auto, what they do is control whether an item will grow to fill the space or shrink to a size compared to its neighbours.
flex-grow:0*
When flex:grow:1 is applied to a child item it will grow to fill the width of its containers, any subsequent flexible width item added alongside it also with a flex-grow:1 will have the same width in the row, if more items are added they will also have the same width. The items will grow or shrink in size dependant on how many items are in the row.
flex-shrink:1*
If you want a certain child element to be half the size of it’s surrounding elements in a row you can apply a flex:shrink value to it, so for it to appear half the size set it to 2.
flex-basis:auto*
flex-basis sets the items minimal width either in a pixel, em, rem, % value or as an auto value, this can be in conjunction with flex-shrink to set a minimal width on a shrinking item.
Flex Shorthand
The above three properties can be applied as shorthand, for example…
flex: 1 0 200px
Here a child element with this applied is set to grow, not shrink and also has a minimum width of 200px.
Order
order:0*
You can set the order property on a child item, for example setting a value as -1 will push the item to the front of the row.
align-self when applied to a child sets the alignment similar to align-items in the containing element, so here you can apply a different alignment than its child siblings.
In all the above examples I have used just the main flex properties with no browser prefixes, whilst most modern browsers support flexbox you may want to throw in some backward compatability, for this I tend to use autoprefixing via Gulp which does it all for me by feeding in my style sheet and it adds the prefixes required for the other browsers.
