Css Flexbox

Makes it easier to design flexible responsive layout without float or positioning

• define a flex container in html doc

flex-wrap:wrap when elements cannot fit on the same line, push onto next line.

flex-direction for column or row or either of those reversed.

flex-basis used to set initial scale of elements, e.g. 100px, 50% etc.

flex-grow: will grow in line with other items if space, 1 for equal with other items, 2 for double flex-shrink: will grow in line with other items if space, 1 for equal with other items, 2 for double

align-content for vertical alignment - to set how multiple lines are spaced apart from each other.

justify-content for horizontal alignment

align-items to align a specific element

To make flex items go onto the next line if they are overflowing the viewport, you can use the flex-wrap property with a value of wrap.

can also use order property to set order of individual elements. By default value of 0, can use -2, -1 ,0, 1, 2 etc.

can also apply: align-self to only apply align on one item

flex-flow combines flex-direction and flex-wrap, e.g.: flex-flow: column wrap

https://kevinsguides.com/guides/webdev/css/creating-a-simple-flexbox-grid https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://www.youtube.com/watch?v=Y8zMYaD1bz0&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG&index=1 https://www.youtube.com/watch?v=tXIhdp5R7sc https://www.youtube.com/watch?v=K74l26pE4YA https://flexboxfroggy.com/