css_flex - CSS Flexbox: A web developer’s delight to positioning elements

CSS Flexbox: A web developer’s delight to positioning elements

Flexbox

Flex Direction

Flex Wrap

Flex Flow

Justify Content

Align Items

Align Content

Order

Flex Grow

Flex Shrink

Flex Basis

Flex

Align Self

Lastly, we have the align-self property which is same as align-items except for the fact the former is applied to the flex-child and the latter is applied to the flex-container/parent. It accepts all the same values as align-items which include the following:

align-self: auto || stretch || flex-start || flex-end || center || baseline;

Due to the fact, that different flex-children in the same container can be assigned differently on the cross axis, it allows to create a highly complex layout. stretch (default): expands the element so that it takes entire height of cross axis flex-start: brings all the elements to the beginning/top of flex parent flex-end: moves all elements to endpoint/bottom of the flex parent center: moves all elements to center of the flex parent baseline: all the elements are aligned based on the baseline of text inside them which might make them look asymmetrical (I do not own copyright to images used in the article. Please contact for removal with a copy of legal document of ownership )

https://medium.com/@sahil.kapoor440/css-flexbox-a-developers-rejoice-to-placing-elements-on-a-website-29efaa3aa9df