Blog

September 24, 2019

🚀 Flexbox Zombies

👨‍💻 By Dave Geddes

Display - display: flex;

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;

align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: stretch;
align-items: space-between;
align-items: space-around;

align-self: flex-start;
align-self: stretch;
align-self: center;
align-self: flex-end;

flex-grow: 1;

flex-shrink: 1;

Fills the width based on pixel(px)
width is completely ignored.
If width is 300px with flex-basis: 100px then flex-basis: 100px
If min-width is 300px with flex-basis: 100px then flex-basis: 300px
If max-width is 30px with flex-basis: 100px then flex-basis: 30px
Default: flex-basis: auto
flex-basis is just a hypothetical size before any growing or shrinking begins.

flex-basis: 100px;

order: 2;

flex-wrap: wrap;
flex-wrap: wrap-reverse;

align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;

flex-flow: row-reverse wrap;
flex: 1 1 auto;

Share on Twitter

Share on Facebook

Created by Navin. He loves to learn, blog and develop new applications.