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;
              }