Flexbox Demos
Resize each box below using its bottom right corner to demonstrate its responsivenes.
.container {display:inline-flex; }
.container > div {flex-basis: 50px;} (this is the base width of a row or the height of a column.)
As-is
One
Two
Three
Four
Five
Six
Seven
align-items:center;
justify-content:center
One
Two
Three
Four
Five
Six
Seven
align-items:flex-end;
justify-content:space-around
One
Two
Three
Four
Five
Six
Seven
flex-direction:column
One
Two
Three
Four
Five
Six
Seven
justify-content:flex-end;
flex-direction:row-reverse
One
Two
Three
Four
Five
Six
Seven
flex-direction:column;
justify-content:flex-end;
One
Two
Three
Four
Five
Six
Seven
flex-direction:column-reverse;
justify-content:space-between
One
Two
Three
Four
Five
Six
Seven
flex: 1 1 0 (grow, shrink, basis). Can be shortened to flex:1 - commonly used.
The default in flex is flex: 0 1 auto. This gives more space to cells with longer text or bigger images.
To make all cells have equal space, set basis to 0.
One
Two
Three
Four
Five
Six
Seven
Single, double, and triple widths.
Container: display:flex.
Children: flex:1,2,+ 3 respectively.
One
Two
Three