CSS-Flexbox

CSS Flexbox simplified

• CSS Flexbox simplified course by Shruti Balasa
• Based of the original source code

Table of Contents

• 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
  1. Flexbox is for one dimension layouts / Grid is for two dimension layouts
  2. Flexbox is for components / Grid is for layouts (or complex components)
  3. Flexbox for the content-first / Grid for the layout-first