Flex is a display property that converts block elements into flex items. When declared using display: flex in a parent container, the elements in that container will default to a flex start position that is towards the top left.
This allows us to create a container with certain dimensions and then move the elements inside it without affecting the outer one.
FlexBox Froggy - a game to learn flexbox
Flex containers
If we want to move where these boxes are placed we can justify-content, which defaults to flex-start but can be changed to something like flex-end or simply center.
To manage elements in the horizontal plane use justify-content. In the vertical we use align-items. Additionally, we can use flex-direction: column to stack each element into a column rather than a row.
By default the flexbox items will overflow the container they are in. We can fix this by using flex-wrap: wrap to ensure they wrap around the size of the container as it shrinks.
As a shorthand we can use flex-flow: row wrap to force the elements into rows that wrap.
Flex items
Each item in a flex box can be turned into a flex container as well.
We can use a flex-basis property along with flex-grow to manage how much space an item will take. Consider the following:
.grow {
flex-grow: 1;
flex-basis: 100px;
}
.grow .growmore {
flex-grow: 2;
}What this is doing is it gives each item there 100px to grap onto. As the viewport space increases, the .grow item will expand in size, but for every pixel that it grabs .growmore will have 2 pixels, since it was a flex-grow: 2 property.
We can do the opposite by declaring flex-shrink, which will shrink the items as the view port decreases. A flex-shrink: 2 property will mean the item will shrink twice as fast as one with a flex-shrink: 1 value.
We can do the above in shorthand by simply calling flex:
.flexitems {
flex: 1 1 250px;
}the order of properties is: grow shrink basis
Order
We can change the order of any given item by simply declaring its order. We can select specific items by using nth-child(<int>).