DEV Community

Sujith V S
Sujith V S

Posted on • Updated on


Css Flexbox Cheat Sheet

flexbox - used to align items perfectly.
grid - can also be used to align items.

flex container - is the element that holds flex items.
flex items - direct children of flex container
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>

Flex Container Properties:

flex-direction - row,column
flex-wrap -value:wrap( to adjust flex items to the next line, if all the items doesnt fit in one line, works only when the width or basis is specified.)
justify-content(main axis) = start,end,center,space-around,space-between
align-items(cross axis) = end,start,center(align-self:to align a single flex item[flex item proprety])

Flex item Properties:
order - values:1,2,3..(to change the order of items in flex container)
flex-grow - value:1,2,3..(size of flex item, when it grows)(it also take the whole width of the container)
flex-shrink - value:1,2,3..(size of flex item, when it shrinks)
flex-basis - same as width.
align-self = end,start,center(to align a single flex item specifically.)
shortcut= flex: flex-grow flex-shrink flex-basis

Top comments (0)

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git