Basics

Container (parent)

                    
                        .container {
                            display: flex;
                        }
                    
                

flex-direction

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

flex-wrap

                    
                        .container {
                            flex-wrap: nowrap | wrap | wrap-reverse;
                        }
                    
                

justify-content (main axis)

align-items (cross axis)

Items (children)

order

flex property

                    
                        .item {
                            flex: none
                                | <'flex-grow'> <'flex-shrink'> <'flex-basis'>
                        }
                    
                

flex-basis

• Starting point before growing/shrinking
• Every Unit (%, px, em, rem ...)

                    
                        .item {
                            flex-basis: <length> | auto; /* default auto */
                        }
                    
                

flex-grow/flex-shrink

                    
                        .item {
                            flex-grow: <number>; /* default 0 */
                            flex-shrink: <number>; /* default 1 */
                        }
                    
                

Browser Support

Usage relative

Basics

Grid Container (parent)

                    
                        .container {
                            display: grid | inline-grid | subgrid;
                        }
                    
                

grid-template-columns / grid-template-rows

grid-template-columns / grid-template-rows

                    
                        .container {
                            grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
                            grid-template-rows: [row1-start] 25% [row1-end row2-start] 100px [row2-end row3-start] auto [row3-end];
                        }
                    
                

fr (fractions)

                    
                        .container {
                          grid-template-columns: 1fr 50px 1fr 1fr;
                        }
                    
                

grid-template-areas

grid-template-areas

                    
                        .container {
                            grid-template-columns: 50px 50px 50px 50px;
                            grid-template-rows: auto;
                            grid-template-areas:
                                "header header header header"
                                "main main . sidebar"
                                "footer footer footer footer";
                        }
                    
                

grid-template-areas

• automatic line names (header-start, header-end)
• column and row lines
• shorthand: grid-template

More properties to check out

• grid-gap
• justify-items, justify-content
• align-items, align-content
• and a lot more

Grid Items (children)

                    
                        .item {
                            grid-column-start: 2;
                            grid-column-end: five;
                            grid-row-start: row1-start;
                            grid-row-end: span 2
                        }
                    
                

grid-area

                    
                        .item {
                            grid-area: header;
                        }
                    
                

More properties to check out

• justify-self
• align-self