Display

Classes related to visibility and structure, which set the layout of the children of an element.

• /* DISPLAY */
  .invisible{visibility: hidden}.hidden{visibility: hidden}.block{display: block}.none{display: none}
  .noverflow{overflow: hidden}.noverflow-x{overflow-x: hidden}.noverflow-y{overflow-y: hidden}
  .autoverflow{overflow: auto}.autoverflow-x{overflow-x: auto}.autoverflow-y{overflow-y: auto}
  /* FLEX */
  .flex{display: flex }
  .flex-1{flex: 1 }.flex-2{flex: 2 }.flex-3{flex: 3 }
  .flex-center{display: flex; justify-content: center; align-items: center }
  .flex-row{display: flex; flex-direction: row; justify-content: center; align-items: center }
  .flex-center{display: flex; justify-content: center; align-items: center }
  .flex-col{display: flex; flex-direction: column; justify-content: center; align-items: center }
  .flex-row-r{display: flex; flex-direction: row-reverse; justify-content: center; align-items: center }
  .flex-col-r{display: flex; flex-direction: column-reverse; justify-content: center; align-items: center }
  /* FLEX ALIGN */
  .flex-wrap{display: flex; flex-wrap: wrap; justify-content: center; align-items: center }
  .flex-between{display: flex; justify-content: space-between; align-items: center }
  .flex-around{display: flex; justify-content: space-around; align-items: center }
  .flex-align-start{display: flex; align-items: flex-start !important} /* SPECIAL SPECIFIC */
  .flex-align-end{display: flex; align-items: flex-end !important}
  .flex-align-stretch{display: flex; align-items: stretch !important}
  .flex-justify-start{display: flex; justify-content: flex-start !important}
  .flex-justify-end{display: flex; justify-content: flex-end !important}
  .flex-justify-center{display: flex; justify-content: center !important}
  .flex-justify-stretch{display: flex; justify-content: stretch !important}
  .flex-justify-between{display: flex; justify-content: space-between !important}
  .flex-justify-around{display: flex; justify-content: space-around !important}
  .flex-align-self-start{align-self: flex-start !important}
  .flex-align-self-center{align-self: center !important}
  .flex-align-self-end{align-self: flex-end !important}
  /* FLEX GAP */
  .gap-1{gap: 5px }.gap-2{gap: 10px }.gap-3{gap: 15px }.gap-4{gap: 20px }.gap-5{gap: 25px }
  .gap-6{gap: 30px }.gap-7{gap: 35px }.gap-8{gap: 40px }.gap-50{gap: 50px }.gap-100{gap: 100px }