Custom Vertical Alignment for Individual Flex Items

.flex-container {
  display: flex;
  align-items: flex-start; /* Default alignment for all items */
  height: 200px;
  border: 1px solid #ccc;
}

.item {
  padding: 10px;
  margin: 5px;
  background-color: lightcoral;
}

.item-center {
  align-self: center; /* Override for this specific item */
  background-color: lightgreen;
}

.item-end {
  align-self: flex-end; /* Override for another specific item */
  background-color: lightblue;
}

How it works: This CSS snippet demonstrates how to vertically align individual items within a flex container using the `align-self` property. While `align-items` sets the default alignment for all children along the cross-axis, `align-self` allows you to override this behavior for specific flex items, positioning them at the start, center, or end of the cross-axis. This offers fine-grained control over item placement without affecting the overall container alignment.