CSS Flex Alignment

/* CSS Flex Alignment Properties */

/* Container Properties for Alignment */
.flex-container {
  display: flex;
  
  /* Main Axis Alignment */
  justify-content: flex-start; /* flex-start, flex-end, center, space-between, space-around, space-evenly */
  
  /* Cross Axis Alignment (single line) */
  align-items: stretch; /* stretch, flex-start, flex-end, center, baseline */
  
  /* Cross Axis Alignment (multiple lines) */
  align-content: stretch; /* stretch, flex-start, flex-end, center, space-between, space-around */
}

/* Item Properties for Alignment */
.flex-item {
  /* Individual Cross Axis Alignment */
  align-self: auto; /* auto, stretch, flex-start, flex-end, center, baseline */
}

/* Justify Content Examples */
.justify-start {
  justify-content: flex-start; /* Items packed at start of main axis */
}

.justify-end {
  justify-content: flex-end; /* Items packed at end of main axis */
}

.justify-center {
  justify-content: center; /* Items centered along main axis */
}

.justify-between {
  justify-content: space-between; /* Equal space between items, none at edges */
}

.justify-around {
  justify-content: space-around; /* Equal space around items, half at edges */
}

.justify-evenly {
  justify-content: space-evenly; /* Equal space between and around items */
}

/* Align Items Examples */
.align-stretch {
  align-items: stretch; /* Items stretch to fill container (default) */
}

.align-start {
  align-items: flex-start; /* Items aligned to start of cross axis */
}

.align-end {
  align-items: flex-end; /* Items aligned to end of cross axis */
}

.align-center {
  align-items: center; /* Items centered along cross axis */
}

.align-baseline {
  align-items: baseline; /* Items aligned to their text baselines */
}

/* Align Content Examples (for multi-line containers) */
.align-content-stretch {
  align-content: stretch; /* Lines stretch to take remaining space (default) */
}

.align-content-start {
  align-content: flex-start; /* Lines packed to start of cross axis */
}

.align-content-end {
  align-content: flex-end; /* Lines packed to end of cross axis */
}

.align-content-center {
  align-content: center; /* Lines centered along cross axis */
}

.align-content-between {
  align-content: space-between; /* Equal space between lines, none at edges */
}

.align-content-around {
  align-content: space-around; /* Equal space around lines, half at edges */
}

/* Align Self Examples */
.self-auto {
  align-self: auto; /* Follows container's align-items (default) */
}

.self-stretch {
  align-self: stretch; /* Item stretches to fill cross axis */
}

.self-start {
  align-self: flex-start; /* Item aligned to start of cross axis */
}

.self-end {
  align-self: flex-end; /* Item aligned to end of cross axis */
}

.self-center {
  align-self: center; /* Item centered along cross axis */
}

.self-baseline {
  align-self: baseline; /* Item aligned to text baseline */
}

/* Margin Auto for Advanced Alignment */
.margin-auto {
  margin: auto; /* Can be used for centering in specific scenarios */
}

.margin-left-auto {
  margin-left: auto; /* Pushes item to the right */
}

.margin-top-auto {
  margin-top: auto; /* Pushes item to the bottom */
}

/* Practical Alignment Examples */

/* Perfect centering */
.perfect-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Navigation with logo on left, items on right */
.nav-split {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Form layout with labels and inputs aligned */
.form-aligned {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-row {
  display: flex;
  align-items: center;
}

.form-label {
  flex: 0 0 120px;
  text-align: right;
  padding-right: 1rem;
}

.form-input {
  flex: 1;
}

/* Card grid with consistent heights */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* Make cards equal height */
  gap: 1rem;
}

.card {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
}

.card-content {
  flex: 1; /* Push button to bottom */
}

/* Media object alignment */
.media-object {
  display: flex;
  align-items: flex-start; /* Align items to top */
  gap: 1rem;
}

.media-content {
  flex: 1;
  align-self: center; /* Center content vertically */
}

/* Footer with sticky content at bottom */
.sticky-footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sticky-footer main {
  flex: 1;
}

/* Responsive alignment changes */
@media (max-width: 768px) {
  .responsive-align {
    flex-direction: column;
    align-items: stretch; /* Full width items on mobile */
  }
  
  .form-row {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form-label {
    text-align: left;
    padding-right: 0;
    margin-bottom: 0.5rem;
  }
}

/* Grid-like layout with flexbox */
.flex-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Center items horizontally */
  align-items: center; /* Center items vertically */
  gap: 1rem;
}

.flex-grid-item {
  flex: 0 1 200px;
}

/* Vertical centering with variable content */
.vertical-center {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center vertically */
  min-height: 300px;
}

/* Baseline alignment for form elements */
.baseline-form {
  display: flex;
  align-items: baseline; /* Align to text baseline */
  gap: 1rem;
}

/* Masonry layout approximation */
.masonry {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between; /* Distribute columns */
  height: 1000px;
}

.masonry-item {
  width: 32%;
  margin-bottom: 1rem;
}

/* Debugging alignment */
.debug-align {
  border: 1px dashed #ccc;
  padding: 0.5rem;
}

.debug-container {
  border: 2px solid #3498db;
  background: rgba(52, 152, 219, 0.1);
}

.debug-main-axis {
  background: rgba(231, 76, 60, 0.1);
}

.debug-cross-axis {
  background: rgba(46, 204, 113, 0.1);
}