topic 2

• Responsive Design


  approach that ensures websites adapt to different screen sizes and devices, providing a seamless user experience
• flex box


  one dimension

  
• CSS Grids


  two dimensions

  
• flexbox


  one-dimensional layou method that uses rows or columns to arrange objects. items flex (expand) to fill additional space or shrink to fit into smaller spaces
• main axis - horizontal

  cross axis - vertical
• Parent Element (Two Main Components)

  Flex Container
• Children Element (Two Main Components)

  Flex Items
• display: flex; | flex container properties


  enables flexbox in an element
• flex-direction | flex container properties

  defines the main axis (row, column, row-reverse, column-reverse)
• justify-content | flex container properties

  aligns items along the main axis (flex-start, center, space-between, etc.)
• align-items | flex container properties

  aligns items along the cross axis (stretch, center, flex-start)
• align-content | flex container prcoperties

  controls spacing when there are multiple rows/columns
• flex-wrap | flex container properties

  allows items to wrap (nowrap, wrap, wrap-reverse)
• gap | flex container properties

  adds spacing between items
• flex-grow | flex item properties


  specifies how much an item should grow
• flex-shrink | flex item properties


  specifies how much an item should shrink
• flex-basis | flex item properties


  defines the initial size before growing/shrinking
• order | flex item properties


  controls item order
• align-self | flex item properties


  overrides align-items for a specific item
• display-flex;


  .

  
• flex-direction: row;


  .

  
• flex-direction: column;


  .

  
• justify-content: center;


  .

  
• align-items: center;


  .

  
• flex-wrap: wrap;


  .

  
• gap: 10px;


  .

  
• flex-grow: 1;


  .

  
• order: -1;


  .

  
• align-self: flex-end;


  .

  
• CSS Grid


  a method for organizing elements on a webpage using a two-dimensional layout of intersecting grid lines
• Grid Container


  Parent element that holds the grid items
• Grid Items


  All direct children elements of the grid container
• Grid Lines


  horizontal lines (separate rows) and vertical lines (separate columns) that define the structure of the grid
• Grid Cell


  Individual units formed by the intersection of rows and columns
• Grid Track 


  adjacent space between two grid lines
• grid area


  space surrounded by four grid lines
• grid gap


  space between the rows and columns in a grid
• display: grid


  turns an html element into a grid container
• grid-template-columns


  defines the size and number of columns
• grid-template-rows


  defines the size and number of rows