- 01 First look at CSS Flexbox
- Navigation bar: basic. display: display:flex, gap
- Testimonial section in a single row: all blocks are of the same height but different widths based on the length of text within
- 02 Spacing and alignment
- Navigation bar with logo: display: flex, gap, justify-content: center, align-items: center
- Testimonial section in a single row: all blocks are of the same height and same widths
- 02b Center div on page: Fisrt method center div with justify-content: center, align-items: center
- 03 Wrap items into multiple rows: flex-wrap: wrap, align-content
- 04 Cross-axis alignment and flow direction: Prices: main axis, cross axis
- 04b Login screen: flex-direction-column
- 04c Testimonial
- 05 Grow and shrink flex items: common layout, sidebar and main content, flex-grow: 1
- 05b Post vertical: flex-grow: 1
- 05c Post horizontal: flex-grow: 1 and flex-shrink: 0
- 06 Flex basis vs width: width: 33.33% vs flex-basis: 33.33% vs flex-basis: 0% and flex-grow: 1. Flex shorthand: flex: <flex-grow> <flex-shrink> <flex basis>
- 07 The order property: Switch mobile to desktop to see it
- 08 Aligning individual items: Post horizontal variant: align self
- 08b Login screen: flex-direction-column, align self
- 09 Flexbox and auto margins: margin-inline-start: auto;, margin-inline-end: auto;
- 09b Footer problem: flex-direction: column, margin-block-start: auto
- 09c Center div: Second method center div with margin: auto
- 10 Make a flex fontainer Inline: display: inline-flex
- 11 Test everything you've learned about Flexbox
- 12 Flexbox vs Grid: Prices. View 06 flex basis and compare
- Flexbox is for one dimension layouts / Grid is for two dimension layouts
- Flexbox is for components / Grid is for layouts (or complex components)
- Flexbox for the content-first / Grid for the layout-first
dragoncillos / css-flexbox Goto Github PK
View Code? Open in Web Editor NEWCSS Flexbox Simplified
Home Page: https://dragoncillos.github.io/CSS-Flexbox/