/* Flex Container */
  .flex-container {
    display: flex; /* Uporablja se za definiranje fleksibilnega vsebnika */
  }
  
  /* Flex Direction */
  .flex-row {
    flex-direction: row; /* Postavi elemente v vrstico (vodoravno) */
    /* Primer: */
    /* .flex-container.flex-row > .item { ... } */
  }

  .flex-row-reverse {
    flex-direction: row-reverse; /* Postavi elemente v obratno vrstico (vodoravno) */
    /* Primer: */
    /* .flex-container.flex-row-reverse > .item { ... } */
  }
  
  .flex-container-column {
    display: flex; /* Uporablja se za definiranje fleksibilnega vsebnika */
    flex-direction: column; /* Postavi elemente v stolpec (navpično) */
  }

  .flex-container-column-center {
    display: flex; /* Uporablja se za definiranje fleksibilnega vsebnika */
    flex-direction: column; /* Postavi elemente v stolpec (navpično) */
    align-items: center; /* Poravna elemente na sredino vsebnika (navpično) */
    justify-content: center; /* Poravna elemente na sredino vsebnika */
  } 
  

  .flex-column {
    flex-direction: column; /* Postavi elemente v stolpec (navpično) */
    /* Primer: */
    /* .flex-container.flex-column > .item { ... } */
  }
  
  .flex-column-reverse {
    flex-direction: column-reverse; /* Postavi elemente v obratni stolpec (navpično) */
    /* Primer: */
    /* .flex-container.flex-column-reverse > .item { ... } */
  }
  
  /* Flex Wrap */
  .flex-nowrap {
    flex-wrap: nowrap; /* Elementi ostanejo v eni vrstici */
    /* Primer: */
    /* .flex-container.flex-nowrap > .item { ... } */
  }
  
  .flex-wrap {
    flex-wrap: wrap; /* Elementi se zavijejo v naslednjo vrstico, če ni dovolj prostora */
    /* Primer: */
    /* .flex-container.flex-wrap > .item { ... } */
  }
  
  .flex-wrap-reverse {
    flex-wrap: wrap-reverse; /* Elementi se zavijejo v obratno vrstico */
    /* Primer: */
    /* .flex-container.flex-wrap-reverse > .item { ... } */
  }
  
  /* Justify Content */
  .justify-start {
    justify-content: flex-start; /* Poravna elemente na začetek vsebnika */
    /* Primer: */
    /* .flex-container.justify-start > .item { ... } */
  }
  
  .justify-end {
    justify-content: flex-end; /* Poravna elemente na konec vsebnika */
    /* Primer: */
    /* .flex-container.justify-end > .item { ... } */
  }
  
  .justify-center {
    justify-content: center; /* Poravna elemente na sredino vsebnika */
    /* Primer: */
    /* .flex-container.justify-center > .item { ... } */
  }
  
  .justify-between {
    justify-content: space-between; /* Enakomerno razporedi elemente z enakim prostorom med njimi */
    /* Primer: */
    /* .flex-container.justify-between > .item { ... } */
  }
  
  .justify-around {
    justify-content: space-around; /* Enakomerno razporedi elemente z enakim prostorom okoli njih */
    /* Primer: */
    /* .flex-container.justify-around > .item { ... } */
  }
  
  .justify-evenly {
    justify-content: space-evenly; /* Enakomerno razporedi elemente z enakim prostorom med njimi in okoli njih */
    /* Primer: */
    /* .flex-container.justify-evenly > .item { ... } */
  }
  
  /* Align Items */
  .align-stretch {
    align-items: stretch; /* Raztegne elemente, da zapolnijo višino vsebnika */
    /* Primer: */
    /* .flex-container.align-stretch > .item { ... } */
  }
  
  .align-start {
    align-items: flex-start; /* Poravna elemente na začetek vsebnika (navpično) */
    /* Primer: */
    /* .flex-container.align-start > .item { ... } */
  }
  
  .align-end {
    align-items: flex-end; /* Poravna elemente na konec vsebnika (navpično) */
    /* Primer: */
    /* .flex-container.align-end > .item { ... } */
  }
  
  .align-center {
    align-items: center; /* Poravna elemente na sredino vsebnika (navpično) */
    /* Primer: */
    /* .flex-container.align-center > .item { ... } */
  }
  
  .align-baseline {
    align-items: baseline; /* Poravna elemente glede na njihovo osnovno črto */
    /* Primer: */
    /* .flex-container.align-baseline > .item { ... } */
  }
  
  /* Align Content */
  .align-content-stretch {
    align-content: stretch; /* Raztegne vrstice, da zapolnijo višino vsebnika */
    /* Primer: */
    /* .flex-container.align-content-stretch > .item { ... } */
  }
  
  .align-content-start {
    align-content: flex-start; /* Poravna vrstice na začetek vsebnika */
    /* Primer: */
    /* .flex-container.align-content-start > .item { ... } */
  }
  
  .align-content-end {
    align-content: flex-end; /* Poravna vrstice na konec vsebnika */
    /* Primer: */
    /* .flex-container.align-content-end > .item { ... } */
  }
  
  .align-content-center {
    align-content: center; /* Poravna vrstice na sredino vsebnika */
    /* Primer: */
    /* .flex-container.align-content-center > .item { ... } */
  }
  
  .align-content-between {
    align-content: space-between; /* Enakomerno razporedi vrstice z enakim prostorom med njimi */
    /* Primer: */
    /* .flex-container.align-content-between > .item { ... } */
  }
  
  .align-content-around {
    align-content: space-around; /* Enakomerno razporedi vrstice z enakim prostorom okoli njih */
    /* Primer: */
    /* .flex-container.align-content-around > .item { ... } */
  }
  
  /* Gap */
  .gap {
    gap: 10px; /* Določi prostor med elementi */
    /* Primer: */
    /* .flex-container.gap > .item { ... } */
  }
  
  .row-gap {
    row-gap: 10px; /* Določi prostor med vrsticami */
    /* Primer: */
    /* .flex-container.row-gap > .item { ... } */
  }
  
  .column-gap {
    column-gap: 10px; /* Določi prostor med stolpci */
    /* Primer: */
    /* .flex-container.column-gap > .item { ... } */
  }
  
  /* Flex Items */
  .flex-item {
    order: 0; /* Določi vrstni red elementa */
    flex-grow: 0; /* Določi, koliko element raste glede na ostale */
    flex-shrink: 1; /* Določi, koliko element krči glede na ostale */
    flex-basis: auto; /* Določi osnovno velikost elementa */
    align-self: auto; /* Določi poravnavo elementa glede na ostale */
    flex: 0 1 auto; /* Kratka oblika za flex-grow, flex-shrink in flex-basis */
    margin: 5px; /* Določi rob okoli elementa */
    /* Primer: */
    /* .flex-container > .flex-item { ... } */
  }
  
  /* Order */
  .order-1 {
    order: 1; /* Določi vrstni red elementa */
    /* Primer: */
    /* .flex-container > .flex-item.order-1 { ... } */
  }
  
  .order-2 {
    order: 2; /* Določi vrstni red elementa */
    /* Primer: */
    /* .flex-container > .flex-item.order-2 { ... } */
  }
  
  /* Flex Grow */
  .grow-1 {
    flex-grow: 1; /* Določi, koliko element raste glede na ostale */
    /* Primer: */
    /* .flex-container > .flex-item.grow-1 { ... } */
  }
  
  .grow-2 {
    flex-grow: 2; /* Določi, koliko element raste glede na ostale */
    /* Primer: */
    /* .flex-container > .flex-item.grow-2 { ... } */
  }
  
  /* Flex Shrink */
  .shrink-1 {
    flex-shrink: 1; /* Določi, koliko element krči glede na ostale */
    /* Primer: */
    /* .flex-container > .flex-item.shrink-1 { ... } */
  }
  
  .shrink-2 {
    flex-shrink: 2; /* Določi, koliko element krči glede na ostale */
    /* Primer: */
    /* .flex-container > .flex-item.shrink-2 { ... } */
  }
  
  /* Flex Basis */
  .basis-auto {
    flex-basis: auto; /* Določi osnovno velikost elementa */
    /* Primer: */
    /* .flex-container > .flex-item.basis-auto { ... } */
  }
  
  .basis-100px {
    flex-basis: 100px; /* Določi osnovno velikost elementa */
    /* Primer: */
    /* .flex-container > .flex-item.basis-100px { ... } */
  }

  .center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }