Flex Cheatsheet

flex-direction

.container { display: flex; flex-direction: row; } .container { display: flex; flex-direction : row-reverse; } .container { display: flex; flex-direction : column; } .container { display: flex; flex-direction : column-reverse; }

justify-content

.container { display: flex; justify-content: flex-start; } .container { display: flex; justify-content: center; } .container { display: flex; justify-content: flex-end; }

align-items

.container { min-height: 250px; height: 100%; } .item { height: auto; } .container { display: flex; align-items: stretch; } .container { display: flex; align-items: flex-start; } .container { display: flex; align-items: center; } .container { display: flex; align-items: flex-end; } .container { display: flex; align-items: baseline; } .item1 { font-size: 16px; } .item2 { height: 150px; font-size: 40px; } .item3 { height: 100px; font-size: 28px; } .item4 { font-size: 16px; }

align-content

.container { min-height: 250px; height: 100%; } .item { height: auto; } .container { display: flex; flex-wrap: wrap; align-content: stretch; } .item { width: 20%; } .container { display: flex; flex-wrap: wrap; align-content: flex-start; } .item { width: 20%; height: 50px; } .container { display: flex; flex-wrap: wrap; align-content: center; } .item { width: 20%; height: 50px; } .container { display: flex; flex-wrap: wrap; align-content: flex-end; } .item { width: 20%; height: 50px; } .container { display: flex; flex-wrap: wrap; align-content: space-between; } .item { width: 20%; height: 50px; } .container { display: flex; flex-wrap: wrap; align-content: space-around; } .item { width: 20%; height: 50px; } .container { display: flex; flex-wrap: wrap; align-content: space-evenly; } .item { width: 20%; height: 50px; }

flex-wrap

.container { min-height: 250px; height: 100%; } .item { height: auto; } .container { display: flex; flex-wrap: nowrap; } .container { display: flex; flex-wrap: wrap; } .container { display: flex; flex-wrap : wrap-reverse; }

flex-basis

AA BBB CCCCCCCCCCC .item { display: block; height: auto; } .container { display: flex; } .item { flex-shrink: 0; flex-basis: auto; } .container { display: flex; } .item { flex-shrink: 0; flex-basis: 0; } .container { display: flex; } .item { flex-shrink: 0; flex-basis: content; } .container { display: flex; } .item { flex-shrink: 0; flex-basis: max-content; } .container { display: flex; } .item { flex-shrink: 0; flex-basis: min-content; } .container { display: flex; } .item { flex-shrink: 0; flex-basis: fit-content; } .container { display: flex; } .item { flex-shrink: 0; flex-basis: fill; }

flex-grow

.container { display: flex; } item { flex-grow:0; } .container { display: flex; } item { flex-grow:1; } .container { display: flex; } item { flex-grow:1; } .item1 { flex-grow:1; } .item2 { flex-grow:2; } .item3 { flex-grow:1; } .container { display: flex; } item { flex-grow:1; } .item1 { flex-grow:1; } .item2 { flex-grow:2; } .item3 { flex-grow:2; }

flex-shrink

1 2 3 .item { height: auto; font-size: 12px; } .container { display: flex; } .item { flex-basis: 250px; flex-shrink: 1; } .item3 { flex-shrink: 2; }

align-self

auto stretch flex-start flex-end center baseline .container { min-height: 250px; height: 100%; } .item { width: auto; height: auto; font-size: 16px; } .container { display: flex; flex-direction: row; } .item1 { align-self: auto; } .item2 { align-self: stretch; } .item3 { align-self: flex-start; } .item4 { align-self: flex-end; } .item5 { align-self: center; } .item6 { align-self: baseline; } .container { display: flex; flex-direction: column; } .item1 { align-self: auto; } .item2 { align-self: stretch; } .item3 { align-self: flex-start; } .item4 { align-self: flex-end; } .item5 { align-self: center; } .item6 { align-self: baseline; }

order

.container { display: flex; } .container { display: flex; } .item1 { order: 2; } .item2 { order: 3; } .item3 { order: 1; } .container { display: flex; flex-direction: column; } .container { display: flex; flex-direction: column; } .item1 { order: 2; } .item2 { order: 3; } .item3 { order: 1; }