A guide for those without a perfect memory
FlexBox Properties
Container Properties
flex-direction:
column
column-reverse
row
row-reverse
;
The ‘flex-direction’ property determines the main-axis and cross-axis of a container. The main & cross axis is essentially the direction in which content is displayed. This can switch between ‘row’ and ‘column’.
1
2
3
justify-content:
flex-start
center
space-evenly
space-between
;
The ‘justify-content’ property determines the position of items in a container relative to the main axis. For example, if the ‘flex-direction’ was ‘row’, the ‘justify-content’ property would determine the horizontal position of items in a container.
1
2
3
align-items:
flex-start
center
flex-end
stretch
;
Similarly, the ‘align-items’ property determines the position of items in a container relative to the cross-axis. For example, if the ‘flex-direction’ was ‘row’, the ‘align-content’ property would determine the vertical position of items in a container.
1
2
3
flex-wrap:
nowrap
wrap
wrap-reverse
nowrap
;
The ‘flex-wrap’ property determines what will happen if the total width/height of items exceeds the width/height of the parent container. If, for example, ‘flex-wrap’ has a value of ‘wrap’, items will pass onto the next row, column if they run out of horizontal/vertical space.
1
2
3
4
5
align-content:
center
space-around
space-between
flex-end
;
Similarly, the ‘align-items’ property determines the position of items in a container relative to the cross-axis. For example, if the ‘flex-direction’ was ‘row’, the ‘align-content’ property would determine the vertical position of items in a container.
1
2
3
4
5
6
Item Properties
order:
0
5
-20
500
;
Order is pretty self-explanatory. The order of an item determines its position relative to all the other items. The order of items is simply determined by their values; the highest order value will come last in a layout. Order values can also be negative (e.g. -100).
1
2
3
4
flex-grow:
1
0.5
2
10
;
If flex-grow is enabled, it will attempt to fill the container with items on the main-axis. The value associated with the flex-grow property will determine how much an item will stretch relative to how much other items stretch.
1
2
3
flex-shrink:
1
0.5
2
10
;
If flex-shrink is enabled, it will attempt to shrink item in the container when the total length of the items on the main-axis exceeds the length of the main axis of the container. In other words, this determines if and to what extent items will shrink to fit within a container.
1
2
3
4
5
align-self:
flex-start
center
flex-end
center
;
Align-self allows you to position individual items along the cross-axis independently from the value of the ‘align-items’ property of the parent container. The values are identical to those of ‘align-items’.
1
2
3
4
flex-basis:
100px
auto
300px
content
;
Flex-basis determines the length along the main-axis of an item. This’ll overwrite the width/height of an item, however it won’t apply if there is a min/max property that conflicts with its value.
1
2
3
You're Becoming a Pro!
CSS supports many more properties and values, but I rarely use the more complex CSS in my day-to-day coding. It took me a little while to construct, and I'm happy to offer it for free, but please buy me a coffee!