Flexbox

• task What do this line do? flex: 1 1 100%; Ans. Shorthand for flex:flex_growflex_shrinkflex_basis;

• Create container with two elements in same row, with one having 66% and other remaining width.

Center align

html, body {
      display: flex;
      align-items: center; // align-self // vertically
      justify-content: center; // justify-self // horizontlally
      height: 100%;
   }

What is flex-basis?

Flex order can be used to change order of items.

Justify content (horizontal)

flex-start →Default value. Items are positioned at the beginning of the container flex-end → Items are positioned at the end of the container center →Items are positioned in the center of the container space-around →Items will have space before, between, and after them space-evenly →Items will have equal space around them

Align items (vertical)

stretch →Default. Items are stretched to fit the container center →Items are positioned at the center of the container flex-start →Items are positioned at the beginning of the container flex-end →Items are positioned at the end of the container

Pull right

margin-left: auto;