Design Template by Anonymous

Direction & Wrapping

Flex-Direction

The flex-direction property is used to deterime the main axis and the cross axis of the element flow. By default this property is set to row meaning that objects will flow horizontally until they reach the end of the page then wrap to the next line within the container element.

`flex-direction: col;`This figure shows the flow of the elements in a vertical arrangement.

Flex-Wrap

The following images show the use of the flex-wrap property. When enabled if you resize your screen, elements positioned left to right will wrap when they cannot fit within a single line. Traditionally a left right scroll bar would appear allowing you to scroll and see the offscreen content.

`flex-wrap: wrap;`This figure shows the webpage after shrinking the window. Flex-wrap can be seen moving objects which would be off the screen to the next row.